Angular 6，迭代角度模板中的深层嵌套对象

Posted 2023-03-13

【中文标题】Angular 6，迭代角度模板中的深层嵌套对象

【英文标题】：Angular 6, Iterate over a deeply nested object within angular template

【发布时间】：2018-11-14 02:35:31

【问题描述】：

我有一个来自如下服务的对象

  let obj = [
    0: 
      key1: 'val',
      key2: 'val',
      key3: [
        key1: 'val',
        key2: 'val',
        key3: []; 
      ]
    
    1: 
      key1: 'val',
      key2: 'val',
      key3: [
        key1: 'val',
        key2: 'val',
        key3: []; 
      ]
    
  ]

索引可以超过 2 个数组，最多可达 10 个或更多。我需要迭代索引及其对象的键/值。

结果应该是 键1：值 key2: 值

一旦我点击 key3，输出应该是 键1：值 key2: 值

我尝试使用 Object.keys(obj) 获取 obj 的键，但只返回 0 和 1。如何获取内部对象的键，并在我的角度模板中呈现键/值?

 <div *ngFor="let key of obj">
    key +': '+ obj[key]
 <div>

不起作用。上面模板的另一个问题是它没有考虑深度嵌套的对象及其键/值对。

我们将不胜感激。如果有任何令人困惑的地方，请要求澄清。

【问题讨论】：

您需要保持深度水平，还是只想遍历所有键？

我需要遍历所有键，如果其中一个键有一个数组或对象作为值，我也需要对其进行迭代。我的另一个选择是提取更深的 obj（因为我使用的是打字稿），并且可能有一个 if/else 检查，在外部迭代中跳过更深的 obj，并在单独的 div 中迭代更深的 obj。但是，这需要一些我想避免的手动工作。我想保持一切动态并渲染返回的 json 对象。希望这很清楚。

【参考方案1】：

我已经创建了一个关于如何处理这个问题的示例

https://stackblitz.com/edit/angular-aczh2w?file=src%2Fapp%2Fhello.html

这是你要找的吗？