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

[{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

Answer 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 条件下使用equeal运算符另外，您的子HTML代码必须依赖奇数值才能在数组中调用未存在的位置（i - 1）。请记住，第一个索引值为 0

Answer 3

尝试更改此行

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

到这个

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

Answer 4

将此用作输入

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

您的值属于值属性

Answer 5

我能用这个html实现列。只是在使用CSS atm时遇到了一些麻烦，所以它看起来还不应该看起来应该是结构性的，但现在它是正确的。

abc=123 # inline comment

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

Answer 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">

使用* ngFor index将一行中的多个迭代分组

6 个答案: