Angular 2 ng用于条件放置

Question

在我的 angular 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 个位置 ... 如果有 n，则为 n。有没有办法用 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>

Angular 2 ng用于条件放置

Angular 2 ngFor conditional placement

ngfor

angular