Я пытаюсь реализовать функцию поиска (фильтрацию) в компоненте плоского дерева материала, но ничего не происходит, когда я обновляю свой источник данных.Я чувствую, что попробовал все разные методы и не могу заставить его работать.Все, что я хочу сделать, это заменить данные и перерисовать дерево.Что я делаю не так?
Я пробовал разные решения, но многие из них устарели, например:
this.dataSource.data = null;
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
this.dataSource.data = [];
, что выдает ошибку при попытке выравнивания нулевого объекта.
interface FlatNode {
expandable: boolean;
name: string;
level: number;
}
@Component({
selector: 'app-category-list',
templateUrl: './category-list.component.html',
styleUrls: ['./category-list.component.scss']
})
export class CategoryListComponent {
dataChange = new BehaviorSubject<Category[]>([]);
private _transformer = (node: Category, level: number) => {
return {
expandable: !!node.children && node.children.length > 0,
name: node.name,
level: level,
};
}
treeControl = new FlatTreeControl<FlatNode>(
node => node.level, node => node.expandable);
treeFlattener = new MatTreeFlattener(
this._transformer, node => node.level, node => node.expandable, node => node.children);
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
constructor(private categoryListService: CategoryListService) {this.dataSource.data = this.categoryListService.getTopCategories();}
hasChild = (_: number, node: FlatNode) => node.expandable;
ngOnInit() {
this.dataChange.subscribe(data => {
this.dataSource.data = data;
});
}
}
searchCategory(list: Category[]) {
this.dataChange.next(list);
}
}
Я хочу, чтобы источник данных обновил и повторно обработал дерево материалов.