ngFor用于角度嵌套对象[关闭]答案

【问题标题】：ngFor for nested object in angular [closed]ngFor用于角度嵌套对象[关闭]
【发布时间】：2021-01-21 17:14:56
【问题描述】：

我有一个来自服务器的对象：

{
  "12312412": {
    "id": "12312412",
    "something": {
      "54332": {
        "id": "54332",
        "nextNode": {
          "65474": {
            "id": "65474",
            "data": "any"
          },
          "235235": {
            "id": "235235",
            "data": "any"
          },
          "543524": {
            "id": "543524",
            "data": "any"
          }
        }
      }
    }
  },
  "23242434": {
    "id": "23242434",
    "something": {
      "3234234": {
        "id": "3234234",
        "nextNode": {
          "645636": {
            "id": "645636",
            "data": "any"
          },
          "1543534": {
            "id": "1543534",
            "data": "any"
          },
          "12312412": {
            "id": "12312412",
            "data": "any"
          }
        }
      }
    }
  }
}

我需要在 Angular 9 中使用 ngfor 遍历所有嵌套对象。

我应该创建一个多重循环并使其成为数组吗？我正在寻找最佳性能解决方案。谢谢

【问题讨论】：

到目前为止你尝试过什么？你被困在哪里了？

标签： javascript json angular typescript ecmascript-6

【解决方案1】：

您可以制作一个递归组件并使用keyvalue 管道来实现您的目标。如下所示的组件应该处理它：

import { Component, Input, OnInit } from "@angular/core";

@Component({
  selector: "app-key-value-display",
  styleUrls: ["./key-value-display.component.css"],
  template: `
    <div>
      <div
        *ngFor="let item of (obj | keyvalue)"
        [style.margin-left.px]="margin"
      >
        {{ item.key }} :
        <span *ngIf="isPrimitive(item.value); else complex"></span>
        <ng-template #complex>
          <app-key-value-display
            [obj]="item.value"
            [margin]="margin + 4"
          ></app-key-value-display>
        </ng-template>
      </div>
    </div>
  `
})
export class KeyValueDisplayComponent implements OnInit {
  @Input() obj: any;
  @Input() margin = 0;
  constructor() {}

  ngOnInit() {}

  isPrimitive(obj: any) {
    return typeof obj !== "object";
  }
}

Stackblitz

【讨论】：