Question

我使用Angular创建了下面的代码，其中包含两个*ngFor和两个*ngIf。

<div *ngFor="let contact of contactList">
  <span>{{contact.name.formatted}}</span>
  <div *ngFor="let number of contact.phoneNumbers">
    <span *ngIf="number.type == 'mobile'">{{number.value}}</span>
  </div>
</div>

如果隐藏第二个跨度，如何隐藏第一个跨度？我知道我可以通过使用JavaScript循环来做到这一点，但如果可能的话，我想在模板中做到这一点。

Answer 1

由于要隐藏第二个和第一个跨度，因此将在第一个跨度上使用相同的ngIf。因此，您应该在ngFor

中使用第一个跨度

  <div *ngFor="let number of contact.phoneNumbers">
   <ng-container ngIf="number.type == 'mobile'">
    <span>{{contact.name.formatted}}</span>
    <span>{{number.value}}</span>
   </ng-container>
  </div>

* ngIf基于另一个* ngIf

1 个答案: