Question

您好我理解ngIf。

目前我有

的json对象

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

第一个对象的介绍是空字符串，当它有空字符串时我想显示＆＃39;用户还没有写出来＃39;。

我尝试使用这样的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

它应该是== not =

 <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">
        {{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>

Answer 4

当介绍为空时，您想要显示用户尚未编写，如果它不为空，则您希望显示的值简介

为此，您可以使用以下代码段：

        <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>

Angular2如果json对象中有空值，如何使用ngIf显示其他文本？

4 个答案: