Angular *基于另一个*ngIf的ngIf

使用Angular，我创建了以下代码，其中包含两个

*ngFor

s和两个

*ngIf

s

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

{{contact.name.formatted}
{{number.value}}

---

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

您将在第一个跨度上使用相同的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>

{{contact.name.formatted}
{{number.value}}