Question

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

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

此外，我想给孩子缩进这样的东西：

父页面＃1
....＃1的子页面
.........第1个孩子的孩子页面
父页面2 #li
....＃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>

谢谢您的帮助

Answer 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

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

1 个答案: