angular - 显示动态嵌套数据

Question

像这样显示一些动态嵌套数据的最佳方式是什么？

const data = [
  { name: 'Paul', children: [
    { name: 'John'},
    { name: 'Rachel', children: [
      { name: 'Abraham' }, 
      { name: 'Diana' }, 
      { name: 'Sara', children: [
        { name: 'Johan' }
      ]}
    ]},
    { name: 'George', children: [
      { name: 'Stewart' }
    ]},
    { name: 'Andrew' }
  ]},
  { name: 'Richard' }
];

结果应该是:

• > 保罗
  • 约翰
  • > 雷切尔
    • 亚伯拉罕
    • 戴安娜
    • > 萨拉
      • 约翰
  • > 乔治
    • 斯图尔特
  • 安德鲁
• 理查德

Answer 1

这是一个有效的 blitz

你可以创建一个组件如下

这个组件所做的是获取一个数组并将其显示在 li 中，然后用 children 再次调用它自己

list.component.ts

@Component({
  selector: 'list',
  template: `
    <ul *ngIf="data">
      <li *ngFor="let row of data">
        {{row.name}}
        <list [data]="row.children"></list>
      </li>
    </ul>
  `,
})
export class ListComponent  {
  @Input() data: any[];
}

app.component.ts

@Component({
  selector: 'my-app',
  template: '<list [data]="data"></list>',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  data = [
    { name: 'Paul', children: [
      { name: 'John'},
      { name: 'Rachel', children: [
        { name: 'Abraham' }, 
        { name: 'Diana' }, 
        { name: 'Sara', children: [
          { name: 'Johan' }
        ]}
      ]},
      { name: 'George', children: [
        { name: 'Stewart' }
      ]},
      { name: 'Andrew' }
    ]},
    { name: 'Richard' }
  ];
}