Angular 9 материал показывает матовую карточку как родительскую и дочернюю как график - PullRequest
Новая
       33

Angular 9 материал показывает матовую карточку как родительскую и дочернюю как график

0 голосов
/ 10 апреля 2020

Я новичок в angular 9. Я хочу показать мат-карты как родительские и дочерние с графиком. Ниже приведены данные 

 [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]

На основании рисунка ниже я должен показать карточку с графическим изображением

Есть ли в наличии пакет npm? Или это возможно шоу, как это? я пробовал с дорожкой, но не могу.

1 Ответ

1 голос
/ 11 апреля 2020

Чтобы отобразить плоские данные в виде иерархии, вы можете использовать рекурсию компонента. Каждый узел будет отображать все свои дочерние элементы, которые будут отображать следующий уровень дочерних элементов, и т. Д. c.

Поскольку существует несколько узлов root, начните с компонента контейнера render каждый элемент верхнего уровня: 

get rootNodes(): TreeNode[] {
  return this.nodes.filter(node => node.parent === '#');
}

<app-tree *ngFor="let node of rootNodes"
  [nodes]="nodes"
  [nodeId]="node.id">
</app-tree>

Затем каждый из этих компонентов будет визуализировать любые дочерние узлы, используя один и тот же компонент. Поскольку данные плоские, мы передаем все элементы списка каждому компоненту дерева и позволяем этому компоненту сортировать, какие элементы отображать. 

@Component({
  selector: 'app-tree',
  ...
})
export class TreeComponent  {
  @Input() nodes: TreeNode[];
  @Input() nodeId: string;

  get childNodes(): TreeNode[] {
    return this.nodes.filter(node => node.parent === this.nodeId);
  }
}

<!-- Render the item itself, e.g. using a mat-card -->
<h1>{{nodeId}}</h1>

<!-- Render each child -->
<app-tree *ngFor="let childNode of childNodes" 
  [nodes]="nodes"
  [nodeId]="childNode.id">
</app-tree>

Тогда представление иерархии вопрос стиля, например, использование отступов для отступа каждого уровня.

Кроме того, если ваши данные изменяются после первоначального рендеринга, вы можете использовать *ngFor trackBy , чтобы уменьшить требуемый Изменения DOM.

Демо StackBlitz

...