Angular 2 ngFor условное размещение

Question

В моем приложении с угловым 2 у меня есть массив с некоторыми элементами и хотелось бы поместить каждый элемент в определенное место в зависимости от состояния.

Это пример шаблона:

<div> 
    <div>_place if 1 condition</div> 
    <div>_place if 2 condition</div> 
    ... 
    <div>_place if n condition</div> 
</div> 

Итак, я хотел бы поставить элементы массива на 1-е место, если 1 условие, в 2-е место, если 2 ... до п, если п. Есть ли способ сделать это с помощью ngFor или другого?

Answer 1

Да, я бы отфильтровал массив! В ngOnInit() заданные переменные равны результату каждого фильтра. Это сортирует значения одного массива в несколько массивов на основе условий в фильтре.

ngOnInit(){ 
    let div1Values = this.records.filter((item) => { 
      return (item.CustomerKey === 0? item : null); 
    }) 
    let div2Values = this.records.filter((item) => { 
      return (item.IsActive? item : null); 
    }) 
} 

Затем связываются с этими новыми массивами в шаблоне:

<div> 
    <div *ngFor="let record of div1Values">{{record}}</div> 
    <div *ngFor="let item of div2Values">{{item}}</div> 
    ... 
    <div *ngFor="let value of divNValues">{{value}}</div> 
</div> 

Answer 2

Почему бы просто не использовать что-то вроде ниже

<div *ngFor="let value of values"> 
    <div *ngIf="value == Condition1">_place if 1 condition</div> 
    <div *ngIf="value == Condition2">_place if 2 condition</div> 
    ... 
    <div *ngIf="value == ConditionN">_place if n condition</div> 
</div>