Javascript 角度4，如何根据条件将元素放入一个容器或另一个容器中？

数组：

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

模板：

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

{{e.value}}
{{e.value}}

这将产生：

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

1
二
三

我想要什么：

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

1
23

问题：

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

---

创建所需布局的正确模板语法是什么？这是我开始的一个演示

呈现所需布局的正确语法包含在每个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>

在模板内部

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

{{e.value}}
{{e.value}}

工作冲击器：

作为一个评论：请考虑一下，因为Angular 2，所有版本（2+）都被命名为Angular。没有必要区分角度2或角度4，除非您引用的是非常特殊的特征

---

最佳恢复。

呈现所需布局的正确语法包含在每个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>

在模板内部

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

{{e.value}}
{{e.value}}

工作冲击器：

作为一个评论：请考虑一下，因为Angular 2，所有版本（2+）都被命名为Angular。没有必要区分角度2或角度4，除非您引用的是非常特殊的特征

最好的收视