なぜ `ngIf`は2つの配列の1つを隠すことができないのですか？

Question

目的：特定の値はアプリケーションで

二次元アレイを宣言

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

を再現する

ステップを設定されている場合、それは可能である特定の配列を表示します2つの画像をクリックする。 1はelをクリックされるとaになり、もう一方は

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

ループngFor期待される成果を2を作成しb

になります

a1 
a2 
a3 
a4 

または

b1 
b2 
b3 
b4 

現在の結果

a1,a2,a3,a4 
a1 
a2 
a3 
a4 

b1 
b2 
b3 
b4 

または

a1 
a2 
a3 
a4 

b1,b2,b3,b4 
b1 
b2 
b3 
b4 

質問

なぜngIfは、2つの配列のいずれかを隠すことができるようにされていませんか？

Answer 1

複数のテンプレートバインディングを1つの要素に含めることはできません。だからは、同じ要素に対して* 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> 

を今ELは「」結果は次のようになりますの場合：

a1,a2,a3,a4 
a1 
a2 
a3 
a4 

* ngIf両方に該当するので、しかし、「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> 

をところで、あなたは、Liせずに、UL内のタグを持っています。

Answer 2

FunStuffによるとあなたは周りを使用して回避することができます

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