使用 *ngFor 索引将多个迭代分组在一行中

我一直在尝试构建一个具有多列的动态输入对话框。基本上有一个字段列表，我想为每两个字段构造一行。我的尝试看起来像这样（甚至不确定这是否可能）

<div *ngFor="let f of fields; let i = index">
    <div class="row" *ngIf="i % 2 = 1">
        <div *ngFor="let field of [fields[i],fields[i+1]]">
            <div class="col-3"><label>{{field.key}}</label></div>
            <div class="col-3"><input [(ngModel)]="object[field.key]"></div>
        </div>
    </div>
</div>

fields 是对象中所有字段的映射，如下所示：

[{key: fieldName,value: fieldValue},...]

显然，由于我在这里我的代码无法正常工作，因此我愿意接受其他实现的建议。

简单的方法是将行数组预先计算为附加属性：

this.itemsPerRow = 2
this.rows = Array.from(
  Array(Math.ceil(this.fields.length / this.itemsPerRow)).keys()
)

然后在 HTML 中，您将使用两个带切片管道的循环：

<div *ngFor="let i of rows" class="row">
  <div *ngFor="let field of fields | slice:(i*itemsPerRow):(i+1)*itemsPerRow">
    <div class="col-3"><label>{{field.key}}</label></div>
    <div class="col-3"><input [(ngModel)]="object[field.key]"></div>
  </div>
</div>

Demo: http://plnkr.co/edit/GVVyta1mqWAKP09V7Qvw?p=preview http://plnkr.co/edit/GVVyta1mqWAKP09V7Qvw?p=preview