Angular 2 *ngFor的数组/ json渲染中的深层嵌套json到数组[重复]

Posted 2023-03-13

【中文标题】Angular 2 *ngFor的数组/ json渲染中的深层嵌套json到数组[重复]

【英文标题】：Deep nested json to array in array / json rendering of Angular 2 *ngFor [duplicate]

【发布时间】：2016-06-12 20:07:50

【问题描述】：

我想用 angular 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 数组。

【问题讨论】：

在您的情况下“不起作用”是什么意思？看起来像 ***.com/questions/31490713/…

【参考方案1】：

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

查看此答案了解更多详情：

How to display json object using *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;
  

【讨论】：

嗨@Thierry 你能解释一下我们为什么这样做 key: key, value: value[key] 。我理解 key:key 但为什么是第二个参数

运行代码时只显示none none，请您帮忙@thierry