如何使用 Angular 6 构建树节点？答案

【问题标题】：How to build a tree node with Angular 6?如何使用 Angular 6 构建树节点？
【发布时间】：2023-04-09 00:42:01
【问题描述】：

我必须用 Angular 生成一个树节点。该对象称为 Page，每个 Page 都可以有子级，这些子级也可以有自己的子级，依此类推。

现在我必须在我的 Angular Page 对象中显示 HTML 中的层次结构。

另外，我想让孩子像这样缩进：

页面父 #1
....#1 的子页面
.........子页面 #1 的子页面
页面父 #2
....#2 的子页面
........ 子页面 #2 的子页面

你明白了。

我的页面对象是：

export class PageModel {
  id!: number;
  title?: string | undefined;
  typeId?: string | undefined;
  parentId?: number | undefined;
  children?: PageModel[] | undefined;
  publishedDateLocal?: string | undefined;
}

我的 html 组件现在是一个简单的表格...

<table class="table">
  <thead>
    <tr>
      <td>Title</td>
      <td>Page Type</td>
      <td>Published</td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let page of model.pageModels">
      <td>{{ page?.title }}</td>
      <td>{{ page?.pageTypeId }}</td>
      <td>{{ page?.publishedDateLocal }}</td>
      <td>
        <a class="remove" (click)="deletePage(page.id)" [routerLink]="">
            <span class="glyphicon glyphicon-trash text-danger"></span>
        </a>
        <a [routerLink]="['/pageAddEdit', page.id]">
            Edit
        </a>
      </td>
    </tr>
  </tbody>
</table>

感谢您的帮助

【问题讨论】：

你在纠结哪一点？
如何用 Angular 构建层次结构。

标签： html angular

【解决方案1】：

我建议为此使用递归结构。

创建一个以PageModel 作为输入的非常简单的组件。然后您可以显示它，并使用*ngFor 浏览每个孩子，如下所示：

@Component({
  selector: 'hello',
  template: `
  <li>{{model.title}}</li>
  <ul>
      <hello *ngFor="let child of model.children" [model]="child"></hello>
  </ul>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() model: PageModel;

}

这是一个简单的 StackBlitz example

【讨论】：