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

【问题标题】：Use *ngFor index to group multiple iterations in one row使用 *ngFor 索引将多个迭代分组在一行中
【发布时间】：2017-08-08 19:07:06
【问题描述】：

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

<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 是 object 中所有字段的映射，如下所示：

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

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

【问题讨论】：

所以您的意思是字段中 2 个对象 的键、值应该是连续的？
是的，如果字段的大小为 10，我希望 5 行带有 2 个键标签和 2 个输入字段来更改值
当你有奇数个字段，比如7个，你想做什么？
我希望第一列的值第二列应该保持为空（可能确实是 atm 的问题）
@ex0dm3nt 谢谢，我会考虑的。

标签： angular ngfor

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

【讨论】：

这是一个非常干净的解决方案！

【解决方案2】：

这样试试：

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

首先，你必须在 ngIf 条件下使用相等运算符另外，您的子 HTML 代码必须依赖奇数值才能在数组 (i - 1) 中不存在不存在的位置。请记住，第一个索引值是 0

【讨论】：

好主意，尽管我认为您需要将模数与零进行比较 (i % 2 === 0) 并检查内部 for (*ngIf="field") 中的未定义值。

【解决方案3】：

尝试更改此行

<div *ngFor="let f of fields" let i = index>

到这里

<div *ngFor="let f of fields; let i = index">

【讨论】：

抱歉打错字了，我按照你的建议写的，我会修改的。

【解决方案4】：

用这个来输入

<input [(ngModel)]="field.value" name="{{field.key}}" />

您的值在 value 属性中

【讨论】：

不知道是不是出了什么问题，但什么也没显示

【解决方案5】：

我能够用这个 html 实现列。只是 CSS atm 有一些问题，所以它看起来还不是它应该的样子，但在结构上它现在是正确的。

<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="saveObject">
    <div *ngFor="let f of fields; let i = index">
        <div *ngIf="i % 2 === 1 && i < fields?.length" class="ui-grid-row">
            <div *ngFor="let field of [fields[i-1],fields[i]]">
                <div class="ui-grid-col-3 field-label"><label for="attribute">{{field.key}}</label></div>
                <div class="ui-grid-col-3">
                    <p-checkbox *ngIf="booleanFields.indexOf(field.key) !== -1" binary="true" [(ngModel)]="saveObject[field.key]"></p-checkbox>
                    <p-calendar *ngIf="dateFields.indexOf(field.key) !== -1" [(ngModel)]="saveObject[field.key]" dateFormat="yy-mm-dd" [showIcon]="true"></p-calendar>
                    <input *ngIf="(booleanFields.indexOf(field.key) === -1) && (dateFields.indexOf(field.key) === -1)" pInputText id="attribute" [(ngModel)]="saveObject[field.key]"/>
                </div>
            </div>
        </div>
        <div *ngIf="fields?.length % 2 === 1 && i === fields?.length - 1">
            <div *ngFor="let field of [fields[i]]">
                <div class="ui-grid-col-6 field-label"><label for="attributeEnd">{{field.key}}</label></div>
                <div class="ui-grid-col-6">
                    <p-checkbox *ngIf="booleanFields.indexOf(field.key) !== -1" binary="true" [(ngModel)]="saveObject[field.key]"></p-checkbox>
                    <p-calendar *ngIf="dateFields.indexOf(field.key) !== -1" [(ngModel)]="saveObject[field.key]" dateFormat="yy-mm-dd" [showIcon]="true"></p-calendar>
                    <input *ngIf="(booleanFields.indexOf(field.key) === -1) && (dateFields.indexOf(field.key) === -1)" pInputText id="attributeEnd" [(ngModel)]="saveObject[field.key]"/>
                </div>
            </div>
        </div>
    </div>
</div>

最终得到了一些重复的代码，可能会有更好的解决方案，但我现在会坚持下去。非常感谢所有回复的人。

【讨论】：

【解决方案6】：

修改后的 Jaroslaw 的解决方案对我有用（每行 3 项）：

<ng-container *ngFor="let a of array; let i = index">
    <div class="row" *ngIf="i % 3 === 0">
        <div *ngFor="let item of [array[i],array[i+1],array[i+2]]" class="col-md-4">
            <ng-container *ngIf="item">

【讨论】：