CODEWITHSUNDEEP
angular
Denny Rustandi
Denny Rustandi

Reputation: 347

how to loop multidimensional object with *ngFor in angular 4

enter image description here

I try to loop that object with *ngFor in my html.

<tr *ngFor="let artikel of artikels">

</tr>

but that give me the error

enter image description here

Can somebody help me how to loop this object?

I'm new to angular too.. Thanks!!

Upvotes: 0

Views: 815

Answers (1)

Gili Yaniv
Gili Yaniv

Reputation: 3221

You can't iterate over objects with *ngFor, as the error say's you need to use an array like data structure.

The best solution is to use pipe with your *ngFor that transform your object into an array.

Try to add this pipe to your util's module:

@Pipe({name: 'objectToArray'})
export class objectToArray implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }

Import the pipe into your module and use it with your *ngFor 

<tr *ngFor="let articleKey of article|objectToArray">

</tr>

Now you can use 'articleKey' and use it to loop over the nested array:

<tr *ngFor="let articleKey of article|objectToArray">
   <td *ngFor="let article of article[articleKey]">
       <!--your template-->
   </td>
</tr>

Upvotes: 1

Related Questions