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

角度2 ng对于条件放置

2 个答案: