Angular 4，如何根据条件将元素放入一个容器或其他容器？

Question

阵列：

this.elements = [ 
    {'value' : 'One', 'bool': true }, 
    {'value' : 'Two'} 
    {'value' : 'Three'} 
] 

模板：

<ng-container *ngFor="let e of elements"> <div *ngIf="e.bool" style="border:1px solid red">{{e.value}}</div> <div *ngIf="!e.bool" style="border:1px solid blue">{{e.value}}</div> </ng-container>

这产生了：

<div style="border:1px solid red">one</div> 
<div style="border:1px solid blue">two</div> 
<div style="border:1px solid blue">three</div> 

我想什么：

<div style="border:1px solid red">one</div> 
<div style="border:1px solid blue">two three</div> 

问：

什么是正确的模板语法创建所需的布局？这是我开始的一个演示。 https://plnkr.co/edit/BwzMEQ05IJCGdLYNTLXA?p=preview

Answer 1

呈现所需布局的正确语法包括循环每个div。

<h2>Hello {{name}}</h2> 
<ng-container> 
    <div style="border:1px solid red"> 
     <ng-container *ngFor="let e of elements"> 
     {{e.bool ? e.value : ''}} 
     </ng-container> 
    </div> 
    <div style="border:1px solid blue"> 
     <ng-container *ngFor="let e of elements"> 
     {{!e.bool ? e.value : ''}} 
     </ng-container> 
    </div> 
</ng-container> 

工作plunker：https://plnkr.co/edit/6DUPRDtHpOqH9Gkf4erR?p=preview

您也可以以具有模板之外的逻辑过滤阵列。

内ngOnInit（）

this.firstDivElements = this.elements.filter((e) => e.bool) 
    this.secondDivElements = this.elements.filter((e) => !e.bool) 

模板

<ng-container> 
     <div style="border:1px solid red"> 
      <ng-container *ngFor="let e of firstDivElements"> 
      {{e.value}} 
      </ng-container> 
     </div> 
     <div style="border:1px solid blue"> 
      <ng-container *ngFor="let e of secondDivElements"> 
      {{e.value}} 
      </ng-container> 
     </div> 
    </ng-container> 

内部组件plunker：https://plnkr.co/edit/oy1Jz2smbeIzfPszg0rv?p=preview

正如评论：Please，采取计，自角2，所有版本（2+）都只是命名角度。没有必要区分Angular 2或Angular 4，除非你引用了一个非常特殊的特征。

最好的regads。