Deep nested json to array in array / json rendering of Angular 2 *ngFor [duplicate]

Answer 1

You need to use array with ngFor. If you want to use objects at this level, you should consider to use a custom pipe.

See this answer for more details:

• How to display json object using *ngFor

Based on this, I would refactor your code this way:

<div *ngFor='#s of (test | keyValues)'>
  <div *ngFor='#t of (s.value | keyValues)'>
   {{t.value.state}} {{t.value.typ}}
  </div>
</div>

with the following pipe:

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