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

小编典典

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

json

我想列出角度为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数组的数组。

阅读 253

2020-07-27

共1个答案

小编典典

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

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

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

2020-07-27