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

Question

Array:

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

Template:

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

This yields:

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

What I want:

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

Question:

What would be the correct template syntax to create the desired layout? Here is a demo I started. https://plnkr.co/edit/BwzMEQ05IJCGdLYNTLXA?p=preview

Answer 1

The correct syntax to render the desired layout consists in loop each 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>

Working plunker: https://plnkr.co/edit/6DUPRDtHpOqH9Gkf4erR?p=preview

You can also filter the array in order to have that logic outside the template.

Inside ngOnInit()

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

Inside the template

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

Working plunker: https://plnkr.co/edit/oy1Jz2smbeIzfPszg0rv?p=preview

Just as a comment: please, take in count that since Angular 2, all versions (2+) are just named angular. There is no need to differenciate Angular 2 or Angular 4 unless you're referencing a very especific characteristic.

Best regads.