Use *ngFor index to group multiple iterations in one row

问题

I've been trying to construct a dynamic input-dialog with multiple columns. Basicaly there's a list of fields and for every two fields I want to construct a row. My attempt looked like this (not even sure if this is possible)

<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 is a map of all the fields in object and looks like this:

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

clearly since I'm here my code isn't working, I'm open to suggestions for other implementations.

回答1:

Simple way to do it is to precalculate rows array into additional property:

this.itemsPerRow = 2
this.rows = Array.from(
  Array(Math.ceil(this.fields.length / this.itemsPerRow)).keys()
)

Then in HTML you would use two loops with slice pipe:

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

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

回答2:

Try in this way:

<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, you have to use equeal operator in ngIf condition Additionaly, your child-HTML-code must depend on odd values to not called unexist positions in array (i - 1). Remember, that first index value is 0

回答3:

Try changing this line

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

to this

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

回答4:

Use this for input

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

Your values are in value property

回答5:

I was able to achieve the columns with this html. Only having some trouble with CSS atm so it does not yet look the way it should but structurally It's correct now.

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

ended up with a bit of duplicate code and there Might be beter solutions but I'll stick with this for now. Big thanks to everyone who responded.

回答6:

Modified Jaroslaw's solution worked for me (3 items per row):

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

来源：https://stackoverflow.com/questions/42853886/use-ngfor-index-to-group-multiple-iterations-in-one-row