代码之家 › 专栏 › 技术社区 › David Létourneau

如何用角6构建树节点?

angular html

David Létourneau · 技术社区 · 7 年前

现在我必须从角度页面对象中以HTML显示层次结构。

页面父级1
……子页的子页2

我的页面对象是:

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

<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>

1 回复 | 直到 6 年前

user184994 7 年前

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