Как построить узел дерева с Angular 6?

Question

Я должен создать узел дерева с Angular. Объект называется Page, и каждая страница может иметь детей, и у этих детей также могут быть свои собственные дети и т. Д.

Теперь я должен показать иерархическую структуру в HTML из моего объекта Angular Page.

Кроме того, что я хотел бы сделать отступ для таких детей:

• Страница родителя # 1
• .... Дочерняя страница # 1
• ......... дочерний элемент страницы № 1
• Страница родителя # 2
• .... Дочерняя страница # 2
• ........ Child of child страница № 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