使用ngif验证空案例

Question

我正面临着一些问题，我不确定我是否能做到这一点。我想从Json键获得一个嵌套的ngIf。如果键存在，则显示黑色的img并将对象写入到视图的键中，如果Json键不存在，则不写入任何内容(逻辑)并显示灰色的img。我想代码会更好地解释它：

    <div *ngFor="let user of userService.users | async">
           <div *ngIf="user?.data.apps.?tag as myEmpytag">
               <img *ngIf="myEmptytag === empty(so the Json key doesn't exist)" src="greyTag.png"/>
           </div>
           <div *ngIf="user?.data.apps.?tag as myFulltag">
              <div *ngIf="myFulltag === 'something is write(so the Json key is there)">
                <span class="tag3" *ngFor="let user4 of userService4.users4 | async">{{user4.data.incidents[2].tag}}</span>
                <img src="blacktag.png"/>
             </div>
     </div>

Answer 1

你的代码中有太多的*ngIf。你只需要一个*ngIf和一个else模板来做你想要做的事情。简单地检查一下!user.data.apps.tag就足够了。如果值为null、undefined、0或""，则否定断言为true。

<div *ngFor="let user of userService.users | async">
    <img *ngIf="!user.data.apps.tag; else elseBlock" src="greyTag.png"/>
    <ng-template #elseBlock>
        <span class="tag3" *ngFor="let user4 of userService4.users4 | async">{{user4.data.incidents[2].tag}}</span>
        <img src="blacktag.png"/>
    </ng-template>
</div>

如果需要编写更复杂的if语句，那么可以在组件中创建一个函数，并在*ngIf中调用它来处理断言，以避免令人费解的HTML语句。

*ngIf="myAssertFunction(user)"