Angular2 Как использовать ngIf, чтобы показать какой-то другой текст, если в json Object есть пустое значение?

Question

Привет у меня проблемы с пониманием ngIf.

В настоящее время у меня есть объект JSON

Profile:{
0:{name: 'Jen',
intro:'',
gender:'female',
age:'1992'},
1:{name: 'John',
intro:'Hi',
gender:'male',
age:'1988'}
}

Вступление первого объекта - пустая строка, и когда в нем есть пустая строка, я хочу отобразить "Пользователь еще не написал".

Я попытался использовать ngIf, как это, но, конечно, это не работает. Что я должен делать?

<div *ngFor="let p of Profile">
                <p class="fontstyle2">
                    {{p.intro}}
                </p>

                <p class="fontstyle2" *ngIf="p.intro=''">
                    The user hasn't written it yet
                </p>
            </div>

Answer 1

Это должно быть == не =

 <p class="fontstyle2" *ngIf="p.intro==''">
   The user hasn't written it yet
 </p>

Answer 2

ngIf использует синтаксис JavaScript для сравнения, так что вы можете использовать p.intro === '' или просто !p.intro так как пустая строка ложная.

Другое дело, что вы, вероятно, захотите отобразить только одну из альтернатив, поэтому вам следует использовать ngIf в обоих:

<div *ngFor="let p of Profile">
    <p class="fontstyle2" *ngIf="p.intro">
                {{p.intro}}
    </p>

    <p class="fontstyle2" *ngIf="!p.intro">
        The user hasn't written it yet
    </p>
</div>

Другой вариант - сделать это следующим образом:

<div *ngFor="let p of Profile">
    <p class="fontstyle2">
         {{p.intro? p.intro : "The user hasn't written it yet"}}
    </p>

Answer 3

Вы хотите отобразить Пользователь еще не написал это, когда вступление пусто, и если оно не пусто, то вы хотите отобразить значение вступления

Для этого вы можете использовать следующий фрагмент кода:

        <div *ngFor="let p of Profile">
            <p class="fontstyle2" *ngIf="p.intro!=''">
                {{p.intro}}
            </p>

            <p class="fontstyle2" *ngIf="p.intro===''">
                The user hasn't written it yet
            </p>
        </div>

Answer 4

Как многие из здесь сказали, что вы должны использовать === вместо просто = покончено с условием.

<div *ngFor="let p of Profile">
    <p class="fontstyle2">
        {{p.intro}}
    </p>
    <p class="fontstyle2" *ngIf="p.intro===''">
        The user hasn't written it yet
    </p>
</div>

или вы можете просто проверить !

<div *ngFor="let p of Profile">
    <p class="fontstyle2">
        {{p.intro}}
    </p>
    <p class="fontstyle2" *ngIf="!p.intro">
        The user hasn't written it yet
    </p>
</div>