Угловой 2 условный ngFor

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> с *ngFor. Как:

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

Или использовать условную внутри *ngFor. Как это:

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

Или вы могли бы использовать шаблон, как Peter Salomonsen проинструктированы.