multiple ngFor is not working angular 4
10,490
You have a typo :
You forgot an asterix in <li ngFor
. ( hence the error).
Also -
You are iterating an array of arrays of objects. so you need a prop at the end.
The difference : see {{state.MyStateProperty}}
<div *ngFor="let item of states; let i = index">
<ul>
<li *ngFor="let state of item">{{state.MyStateProperty}}</li>
</ul>
</div>
Here's a basic working plnkr representing your nested structure.
Author by
Alaksandar Jesus Gene
Updated on June 04, 2022Comments
-
Alaksandar Jesus Gene almost 2 years
I am trying to populate chunked results using ngFor
<div *ngFor="let item of states; let i = index"> <ul> <li ngFor="let state of item">{{item}}</li> </ul> </div>
If i populate item, i am getting this
The chunked results are converted to string
If i try populating state
<div *ngFor="let item of states; let i = index"> <ul> <li ngFor="let state of item">{{state}}</li> </ul> </div>
I get a blank output.
If * is used before second ngFor
<div *ngFor="let item of states; let i = index"> <ul> <li *ngFor="let state of item">{{state}}</li> </ul> </div>
How can i chunk and populate the values?
Edit-1 & 2
Here is my data that is passed to ngFor (edit 2 as expanded object)
Edit 3 Here is my html output. The data is populating as string if i use
<div class="split-by-4"> <div *ngFor="let item of states; let i = index"> <ul> <li ngFor="let state of item[i]">{{item}}</li> </ul> </div> </div>
Working answer (actually my mistake)
{ $("#cities-with-state-modal").modal('open'); this.chunkStates(); } chunkStates(){ this.states = _.cloneDeep(this.backup.states); // this.states is loading and its giving as string before the data got chunked. let chunkSize = _.toInteger(this.states.length/4); this.statesChunk = _.chunk(this.states, chunkSize); }
html
<div class="split-by-4" *ngIf="statesChunk && statesChunk.length"> <div *ngFor="let item of statesChunk; let i = index"> <ul> <li *ngFor="let state of item">{{state.name}}</li> </ul> </div> </div>