如何根据Angular中的值显示/隐藏项目

Question

如果值存在，我需要显示它，但如果它不存在，我只需要显示一个+图标就可以添加它。

<tr *ngFor="let set of trainingTemplateExercises.data.sets; index as i">
<td *ngIf="set.note">
<input type="text" [(ngModel)]="set.note" name="value" class="form-control" /> 
</td>
<td *ngIf="!set.note">
<input type="text" [(ngModel)]="set.note" name="value" class="form-control" /> 
</td>
<td *ngIf="!set.note">
<p> ANY PLUS ICON example +  </p 
</td>
</tr>

示例：如果set.note exist显示。

如果不存在，则打印文本"任意加号图标示例+"。

如果添加了set.note，但要删除，请添加"-"图标。我试着切换，但没有机会。

Answer 1

<tr *ngFor="let set of trainingTemplateExercises.data.sets; index as i">
<div *ngIf="set.note;else add">
<td *ngIf="!set.id; else edit">
<input type="text" [(ngModel)]="set.note" name="value" class="form-control" /> 
</td>  
<ng-template #edit>
<td>
<p> ANY MINUS ICON example -  </p>
</td>
</ng-template>          
</div>
<ng-template #add>
<td>
<p> ANY PLUS ICON example +  </p>
</td>
</ng-template>
</tr>

Answer 2

尝试使用*ngIf-Else语法。

<tr *ngFor="let set of trainingTemplateExercises.data.sets; index as i">
<div *ngIf="set.note else add">
<td>
<input type="text" [(ngModel)]="set.note" name="value" class="form-control" /> 
</td>
</div>
<ng-template #add>
<td>
<p> ANY PLUS ICON example +  </p 
</td>
</ng-template>
</tr>