角度2の条件付き数値

Question

テンプレートコードをクリーンアップしようとしています。

<ul> 
    <li *ngIf="condition" *ngFor="let a of array1"> 
    <p>{{a.firstname}}</p> 
    <p>{{a.lastname}}</p> 
    </li> 
    <li *ngIf="!condition" *ngFor="let b of array2"> 
    <p>{{b.firstname}}</p> 
    <p>{{b.lastname}}</p> 
    </li> 
</ul> 

私はそんなにテンプレートコードを繰り返す必要がないように、条件付きでarray1またはarray2が*ngIfか何かを使用してを繰り返し処理するために選択する方法はあります：私は、以下の持っていますか？これは単なる例です。私の実際の<li>にはもっと多くのコンテンツが含まれているので、自分自身を繰り返すことは本当にありません。ありがとう！

Answer 1

<li *ngFor="let a of (condition ? array1 : array2)"> 
    <p>{{a.firstname}}</p> 
    <p>{{a.lastname}}</p> 
    </li> 

Answer 2

[ngIf]がngForループの外側にあるテンプレートタグを使用します。

<ul> 
    <template [ngIf]="condition"> 
    <li *ngFor="let a of array1"> 
    <p>{{a.firstname}}</p> 
    <p>{{a.lastname}}</p> 
    </li> 
    </template> 
    <template [ngIf]="!condition"> 
    <li *ngFor="let b of array2"> 
    <p>{{b.firstname}}</p> 
    <p>{{b.lastname}}</p> 
    </li> 
    </template> 
</ul> 

はまた、ここでテンプレート構文について読む：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

Answer 3

をあなたは同じ要素で*ngForと*ngIfの両方を持つことはできません。 で<li>の中に要素を作成することができます。同様に：

<li *ngIf="condition"> 
    <ul> 
     <li *ngFor="let a of array1"> 

それとも*ngFor内部の条件を使用しています。このように：

<li *ngFor="let a of (condition?array1:array2)"> 

Peter Salomonsenのようなテンプレートを使用できます。