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' }
];

结果应为：

保罗
- 约翰
- 雷切尔
  - 亚伯拉罕
  - 戴安娜
  - 萨拉
    - Johan
- 乔治
  - Stewart
- 安德鲁
理查德

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' }
  ];
}

显示动态嵌套的数据

1 个答案: