Angular 为什么“ngIf”不能隐藏这两个数组中的一个？

目标：如果设置了某个值，则显示某个数组

复制步骤

a1
a2
a3
a4

a1,a2,a3,a4
a1
a2
a3
a4

b1
b2
b3
b4

声明一个二维数组

arrays = [
      { id: 'a', name: ['a1', 'a2', 'a3', 'a4'] },
      { id: 'b', name: ['b1', 'b2', 'b3', 'b4'] }
];

在应用程序中，可以单击两幅图像。当一个被点击时，el将成为

a

，而另一个将导致

b

创建两个ngFor循环

<ul *ngFor="let arr of arrays">
  <a *ngIf="arr.id===el" (click)="aMethod(arr.name)">{{arr.name}}</a>
  <li *ngIf="arr.id===el" *ngFor="let arr2 of arr.name">
    <a (click)="aMethod(arr2)">{{arr2}}</a>
  </li>
</ul>

或

当前结果

a1
a2
a3
a4

a1,a2,a3,a4
a1
a2
a3
a4

b1
b2
b3
b4

或

问题

---

为什么

ngIf

不能隐藏两个数组中的一个？

一个元素上不能有多个模板绑定。因此，不能在同一个元素上同时使用*ngIf和*ngFor。您可以这样做：

<ul *ngFor="let arr of arrays">
  <a *ngIf="arr.id === el" (click)="aMethod(arr.name)">{{arr.name}}</a>
  <li *ngIf="arr.id === el">
    <div *ngFor="let arr2 of arr.name">
      <a (click)="aMethod(arr2)">{{arr2}}</a>
    </div>
  </li>
</ul>

因为两个*ngIf都为true，但是'b'将被隐藏

您还可以使用模板标记来代替创建包装器div：

<ul *ngFor="let arr of arrays">
  <a *ngIf="arr.id === el" (click)="aMethod(arr.name)">{{arr.name}}</a>
  <template [ngIf]="arr.id === el">
    <li *ngFor="let arr2 of arr.name">
      <a (click)="aMethod(arr2)">{{arr2}}</a>
    </li>
  </template>
 </ul>

{{arr.name}

{{arr2}}

---

顺便说一句，你在ul里面有一个标签，没有li。

FunStuff说了什么。你可以使用

<ng-container *ngIf="arr.id===el">
  <li *ngFor="let arr2 of arr.name">
</ng-container>

<ng-container *ngIf="arr.id===el">
  <li *ngFor="let arr2 of arr.name">
</ng-container>