如何在Angular中逐个显示嵌套对象答案

【问题标题】：How display nested objects in Angular one per one如何在Angular中逐个显示嵌套对象
【发布时间】：2020-12-14 14:19:23
【问题描述】：

我试图显示嵌套对象以选择主对象或子对象以添加其他对象

const categories = [
  {
    id: 1,
    title: 'Tecnology',
    subCategory: [
      {
        id: 3,
        title: 'JavaScript',
        subCategory: [
          {
            id: 4,
            title: 'Angular',
          },
        ],
      },
      {
        id: 5,
        title: 'C#',
      },
    ],
  },
  {
    id: 2,
    title: 'Health',
  },
];

我的html

<div>
  <a
    class="dropdown-item"
    *ngFor="let category of categories"
  >

    {{ category.title }}
    <span
      *ngFor="let subCategory of category.subForumCategories"
    >
      > {{ subCategory.title }}
    </span>
  </a>
</div>

预期结果

Tecnology
Tecnology > JavaScript
Tecnology > javaScript > Angualr
Tecnology > C#
Health

但我得到了结果

Tecnology > javaScript > C#
Health

在堆栈闪电战中：https://stackblitz.com/edit/angular-ivy-jfkszn?file=src/app/app.component.html

【问题讨论】：

看看这个stackblitz.com/edit/angular-6ew9rl?file=app%2Fapp.component.ts
@Robus 这个例子不使用嵌套对象我不明白它对我有什么帮助。泰
这里是我在网上找到的递归组件示例stackblitz.com/edit/…

标签： angular typescript

【解决方案1】：

最好在打字稿中解决这个问题，然后迭代一个字符串数组而不是对象。 Angular 模板适用于很多东西，但这可能会开始推动它。

这是您在ts 中可以拥有的示例

var categories = [{
    id: 1,
    title: "Technology",
    subCategory: [{
        id: 3,
        title: "JavaScript",
        subCategory: [{
          id: 4,
          title: "Angular"
        }]
      },
      {
        id: 4,
        title: "C#"
      }
    ]
  },
  {
    id: 2,
    title: "Health"
  }
];


getList();

function getList() {
  var list = extractSubCategories(categories);
  console.log(list);
}

function extractSubCategories(categories) {
  var list = [];
  for (var c of categories) {
    if (c.subCategory) {
      list.push(`> ${c.title}`);
      list.push(...extractSubCategories(c.subCategory).map(sc => `> ${c.title} ${sc}`));
    } else {
      list.push(`> ${c.title}`);
    }
  }
  return list;
}

模板：

<div>
  <a class="dropdown-item" *ngFor="let category of getList()" > {{category}} </a>
</div>

【讨论】：

html中的getList()函数效率高吗？它将执行循环、推送和映射每个摘要循环。我会仔细检查较大对象的性能。
@rhavelka 以及此问题中提供的信息，是的，它会很有效。如果问题表明可迭代列表是 10000+ 项，那么也许你会改变策略。不像这样会运行每一个刻度，所以它应该满足目的。

【解决方案2】：

您可以创建递归组件。然后你就可以直接传入对象，按照你想要的方式显示。

组件.ts

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

@Component({
  selector: 'categories',
  template: `
     <div *ngFor="let category of categories">
        <div>
          {{titleHistory}} {{category.title}}
        </div>
        <categories[categories]="category.subCategory" 
                   [title]="titleHistory + category.title" 
                   [depth]="depth+1" 
                   *ngIf="category.subCategory"></categories>
    </div>`,
})
export class CommentComponent implements OnInit {
  @Input() categories: Categories;
  @Input() title: string = '';
  @Input() depth: number = 0;

  titleHistory = '';

  ngOnInit() {
    this.titleHistory = this.depth === 0 ? this.title : (this.title + ' > ');
  }
}

app.component.html

<categories [categories]="categoriesData"></categories>

stackblitz

编辑：更新 stackblitz 并提供更多选项

【讨论】：