Мат дерево не загружает детей - PullRequest
0 голосов
/ 12 марта 2020

люди! Я делаю мат-дерево с такой структурой: каталог (C1), может иметь подкаталоги. Эти подкаталоги (C2) могут также иметь подкаталоги (C3), и этот C3 может иметь подкаталоги (C4). Поэтому я пытаюсь отобразить эту структуру в матовом дереве. До сих пор я сделал это, чтобы показать только до уровня C2 и после этого кнопка не работает. Я получаю эти данные с сервера из одной таблицы со следующими полями: idCatalog, name, description и idCatalogFather. Когда вы получаете данные с сервера, вы получаете эти данные как наблюдаемые с помощью массива. Этот CatalogBean в angular является интерфейсом с полями, описанными выше. Фильтр FilterBean, используемый ниже, просто помогает получить данные с сервера.

Это код из моего файла TS:

export class TreeNode {
  nombre: string;
  children?: TreeNode[];
  hijos: boolean;
  idcatalogo: number;
  isLoading = false;
}


export class FlatTreeNode {
  name: string;
  level: number;
  expandable: boolean;
  catalogo: TreeNode;
}

export class CatalogoComponent implements AfterViewInit, OnDestroy, OnInit {

...

treeControl: FlatTreeControl<FlatTreeNode>;

treeFlattener: MatTreeFlattener<TreeNode, FlatTreeNode>;

dataSource: MatTreeFlatDataSource<TreeNode, FlatTreeNode>;

initialData: TreeNode[];

constructor(private private clasificacionControllerNg: ClasificacionControllerNg, ...){
this.treeFlattener = new MatTreeFlattener(
      this.transformer,
      this.getLevel,
      this.isExpandable,
      this.getChildren
    );

    this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    this.getAllCatalogsMobile();
}

transformer(node: TreeNode, level: number) {
    return { name: node.nombre, level: level, expandable: !!node.hijos, id: node.idcatalogo, catalogo: node };
  }

getLevel(node: FlatTreeNode) {
    return node.level;
  }

isExpandable(node: FlatTreeNode) {
    return node.expandable;
  }

  hasChild(index: number, node: FlatTreeNode) {
    return node.expandable;
  }

  getChildren(node: TreeNode) {
    return node.children;
  }

getAllCatalogsMobile() {
    const filterBean: FilterBean = {} as FilterBean;
    filterBean.inicio = 0;
    filterBean.maximo = 100;
    filterBean.direccion = '';
    filterBean.sort = undefined;
    filterBean.id = 0;
    this.clasificacionControllerNg.listCatalogo(filterBean).subscribe(catalogsList => {
      this.initialData = catalogsList;
      this.dataSource.data = this.initialData;
    });
  }

getCatalogsFromNode(node) {
    if (this.flag) {
      this.flag = false;
      node.isLoading = true;
      const filterBean = {
        inicio: 0,
        maximo: 100,
        direccion: '',
        sort: undefined,
        id: node.id
      } as FilterBean;
      this.clasificacionControllerNg.listCatalogo(filterBean).subscribe((catalogList: TreeNode[]) => {
        console.log(catalogList);
        console.log('node', node);
        console.log('Initial Data', this.initialData);
        const index = this.initialData.indexOf(node.catalogo);
        this.initialData[index].children = catalogList;
        this.dataSource.data = this.initialData;
        node.isLoading = false;
      });
    }
  }

Мой код из шаблона:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- CUANDO NO TIENE HIJOS -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>

  <!-- CUANDO TIENE HIJOS -->
  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle (click)="getCatalogsFromNode(node)">
      <mat-icon>
        {{treeControl.isExpanded(node) ? 'expand_more': 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
    <mat-progress-bar *ngIf="node.isLoading" mode="indeterminate"></mat-progress-bar>
  </mat-tree-node>

</mat-tree>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...