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

我一直在试图构造一个动态的输入对话框，并且有多个列。 Basicaly有一个字段列表，每两个字段我想构建一个行。我尝试这个样子（即使不知道这是可能的）使用* 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>

领域是地图中的所有对象的字段，看起来像这样：

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

清楚，因为我在这里我代码不工作，我打开其他实现的建议。

来源

2017-03-17 Niek T.

所以你的意思是key，来自_2 objects_的值应该是连续的？ –

是，如果字段的大小为10我想要5行，其中2个标签用于键和2个输入字段以更改值 –

当您有奇数个字段时，您想要做什么，例如7？ – eminlala

简单的方法来做到这一点是预先计算行数组附加属性：

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

来源

2017-03-17 10:27:27 dfsq

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

尝试改变这一行

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

这个

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

来源

2017-03-17 09:39:45

对不起，这是一个错误，我按照你的建议，我会编辑它。 –

尝试这种方式：

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

Firsty，你必须在使用equeal操作ngIf条件另外，你的孩子的HTML代码必须依赖于od d值不被称为数组（i - 1）中的未知位置。请记住，第一指标值是

来源

2017-03-17 09:46:58

好主意，虽然我认为你需要比较模数为零（'i％2 === 0'）并检查内部的未定义值（'* ngIf =“field”'）。 – AndyTheEntity

使用此输入

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

你的价值是值属性

来源

2017-03-17 09:50:09

不知道是不是有问题，但没有显示 –

我能够用这个网站来实现的列。只有在使用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>

结束了一些重复的代码，并有可能是解决方案，但我现在坚持这一点。非常感谢所有回复的人。

来源

2017-03-17 10:26:38

修改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">

来源

2017-07-12 10:32:18 AndyTheEntity

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

回答

相关问题