люди! Я делаю мат-дерево с такой структурой: каталог (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>
Я думаю, что реализация источника данных неверна, но я не знаю, какую часть, потому что мне трудно понять примеры в документации. Если вы можете указать мне правильное направление, я был бы признателен. Заранее спасибо