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

Question

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

<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},...]

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

Answer 1

简单的方法是将行数组预先计算到附加属性中:

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>

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