在Angular 2*ngFor的数组/ json渲染中深度嵌套json到数组

Question

我想用角度2*ngFor列出以下json的状态和类型.还应呈现父母属性.

var test= {
  '192-168-0-16':{
    'ac395516-96d0-4533-8e0e-efbc68190e':{
      'state':  "none",
      'typ': "test"
    },
    'ac395516-96d0-4533-8e0e-efbc68190e':{
      'state':  "none",
      'typ':  "dummy"
    }
  },
  '222-21-12-12': {
    'ac395516-96d0-4533-8e0e-efbc68190e': {
      'state': "none",
      'typ': "none"
    }
  }

角度2:

<div *ngFor='#s of test'> <!-- also other properties should be visible -->
   <div *ngFor='#t of s'>
      {{t.state}} {{t.typ}}
   </div>
</div>

当然这不起作用.没有很多数据转换是否可能？我不知道如何获取我的json数组.

Answer 1

你需要使用数组ngFor.如果要在此级别使用对象,则应考虑使用自定义管道.

有关详细信息,请参阅此答案:

• 如何使用*ngFor显示json对象

基于此,我将以这种方式重构您的代码:

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

使用以下管道:

@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;
  }
}