*ngFor 一次取两个值？答案

【问题标题】：*ngFor take two values at once?*ngFor 一次取两个值？
【发布时间】：2018-07-18 20:14:17
【问题描述】：

我正在使用 ngFor 打印标签/输入

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

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

【问题讨论】：

这不是样式问题，而不是结构问题吗？例如。如果您使用的是 flexbox，只需让它包裹并让每个子项的宽度为父项的 50%。如果您真的希望它反映在结构中，您可以迭代成对的项目。
这绝对是样式问题。但是知道用谷歌搜索什么是成功的一半 :) 我会去看看 flexbox 看看我能不能弄明白。谢谢。
制作一个 jsfiddle 或其他东西让我们查看您到目前为止所获得的内容

【解决方案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%;
}

【讨论】：

【解决方案2】：

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

我已经为你做了一个例子来声明一个布局行，以便项目从左到右对齐（我可以使用 column 将它们从上到下堆叠）并且 wrap 属性说“如果没有剩余空间，换行”。

然后对于每个项目，我用fxFlex="50%" 说“占整个宽度的 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>

【讨论】：