*ngFor 一次取两个值？

Question

我正在为打印输出做一个 ngFor labels/inputs

    <div *ngFor="let point of points" class="form-group row col">
        <label for=... ></label>
        <input ...></input>
    </div>

但现在我意识到我想将其中两个放在一行中，而不是每行一个。是否可以用 ngFor 语句做类似的事情？我知道我可以给它添加一个索引，但我仍然不确定这对我有什么帮助，因为我需要将内部 label/div 加倍，并且还要处理点数不是偶数的情况，所以最后一行可能只有一对而不是两对。

Answer 1

Flexbox 方法实现线性列表的 2 列布局

<div class="parent">
  <div class="child" *ngFor="let point of points" >
    <label for=... ></label>
    <input ...></input>
  </div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 50%;
}

Answer 2

使用 Angular，我通常更喜欢使用 @angular/flex-layout。
参见 https://github.com/angular/flex-layout

我已经为您声明了一个布局行的示例，以便项目从左到右对齐（我可以使用 column 从上到下堆叠它们）并且 wrap 属性说 "if there's no more space left, break the line".

然后对于每个项目，我说 "take 50% of the whole width" 和 fxFlex="50%":

<div fxLayout="row wrap">
  <app-demo
    *ngFor="let i of [1, 2, 3, 4, 5, 6, 7]"
    fxFlex="50%"
    [index]="i"
  ></app-demo>
</div>

*ngFor take two values at once?