Лучший способ сделать петлю углового гибкого макета двумя рядами?

Question

Я хотел бы знать, как сделать ngFor с двумя строками в угловом изгибе.

<div *ngFor="let item of items">
    <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap.xs="0">
        <div class="item item-1" fxFlex="50%">
            <div fxLayoutAlign="center" class="item-label">
                {{item.name}}
            </div>
            <div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
        </div>
        <div class="item item-2" fxFlex="50%">
            <div fxLayoutAlign="center" class="item-label">
                {{item.name}}
            </div>
            <div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
        </div>
    </div>

    <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap.xs="0">
        <div class="item item-3" fxFlex="100%">
            <div fxLayoutAlign="center" class="item-label">
                {{item.name}}
            </div>
            <div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
        </div>
    </div>
</div>

Здесь это цикл, но каждый раз при печати 3 значения для каждого индекса.Я хотел бы напечатать значение индекса 0 первого столбца, индекс 1 во втором столбце и значение индекса 2 во второй строке.

Answer 1

Я создал для вас пример stackblitz , основываясь на ваших требованиях.

Правильный путь будет:

<div class="container" fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap.xs="0">
  <!-- you can use ngClass to manage 'item-1' or 'item-2' style -->
  <div class="item" fxFlex="50%" *ngFor="let item of items">
    <div fxLayoutAlign="center" class="item-label">
        {{item.name}}
    </div>
    <div fxLayoutAlign="center" class="item-value">{{item.value}}</div>
  </div>
</div>

wrap/nowrapсвойство в директиве fxLayout делает все, потому что для потомков задано fxFlex="50%".

Я выдал fxLayout.xs, чтобы правильно отобразить его на stackblitz.

Вот @угловая / гибкая документация

Надеюсь, это поможет; -)