Angular 2 ngFor 条件放置答案

【问题标题】：Angular 2 ngFor conditional placementAngular 2 ngFor 条件放置
【发布时间】：2017-01-20 19:59:01
【问题描述】：

在我的 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 或其他方法做到这一点？

【问题讨论】：

标签： angular ngfor

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

我想为<div *ngIf="value == Condition1">_place if 1 condition</div> 容器添加值，但是如果条件为真，*ngIf 每次都会渲染容器。
好吧，我在重新渲染中没有发现任何问题，但是您也可以使用
一些不会重新渲染的内容

跨度>