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上正确呈现。

这里是@angular/flex-layout documentation

希望对您有所帮助；-）

最好的方法来循环两排角柔性版式？

1 个答案: