使用* 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索引在一行中對多個迭代進行分組

回答

相關問題