如何使用 angular2 ngFor 深度嵌套的 json 值

Posted 2023-03-13

【中文标题】如何使用 angular2 ngFor 深度嵌套的 json 值

【英文标题】：how to ngFor deeply nested json value with angular2

【发布时间】：2017-08-15 09:46:00

【问题描述】：

我正在尝试从深度嵌套的 json 对象中获取价值。

我尝试使用管道并成功获取键和值，但它们不是我想要获取的正确键和值。

谁能帮助我如何 ngFor 我在下面写下的值。

data: 
category:[
0:one:'test1', **two**:'test2',
1:one:'test3', **two**:'test4',
2:one:'test5', **two**:'test6'
]
number:[]
]

我想 ngFor '两个'值！

我目前有管道

import  Pipe, PipeTransform  from '@angular/core';

`@Pipe(name: 'keys')
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;
  

在我的组件模板中，我有

<div *ngFor="let one of theme | keys">
  <div *ngFor = " let two of one.key | keys">
    <div *ngFor = "let three of two.key>
         <p id="thm-title">three.value['two']</p>
    </div>
  </div>
</div>

【问题讨论】：

你可以使用 Lodash。 ***.com/a/41453175/2589202

【参考方案1】：

您的 Pipe 按预期工作，您只需对 *ngFor 循环进行一些更改

您在问题中混合了数组和对象，所以我假设您的数据结构如下。这个循环会输出test2test4test6

data = 
    category: [
         0:  one: 'test1', two: 'test2'  ,
         1:  one: 'test3', two: 'test4'  ,
         2:  one: 'test5', two: 'test6'  
    ]

html

<div *ngFor="let one of data | keys">
    <div *ngFor="let two of one.value">
        <div *ngFor="let three of two | keys">
             three.value['two'] 
        </div>
    </div>
</div>

【讨论】：

如何在下拉/选择中填充？例如，显示两个列表。