gpt4 book ai didi

Angular 6 Material 树

转载 作者:太空狗 更新时间:2023-10-29 18:12:35 30 4
gpt4 key购买 nike

我正在尝试根据 docs 制作一棵 Angular Material 树但似乎遇到了一个我似乎无法诊断的错误。 Chromes 在我的 HTML 的第 8 行给出了一个错误,即 Cannot read property 'children' of undefined。看起来好像树被加载到 nestedDataSource 中就好了,但它不会显示任何内容。不可否认,我并不完全确定 Angular Material 树是如何工作的,所以我可能只是搞砸了 html。

Angular 6.01

类别选择器.component.html:

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="category-picker">
<mat-tree-node *matTreeNodeDef="let node">
<li class="mat-tree-node">
{{node.category.name}}
</li>
</mat-tree-node>

<mat-nested-tree-node *matTreeNodeDef="let node; when: node.children.length">
<li>
{{node.category.name}}
<ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>

类别选择器.component.ts:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {NestedTreeControl} from '@angular/cdk/tree';

import {MatSelectModule} from '@angular/material';
import {MatTreeNestedDataSource} from '@angular/material/tree';

import { DataBrokerService } from '../data-broker.service';
import { Category } from '../datatypes'
import { observable, of } from 'rxjs';

export class CategoryNode {
children: CategoryNode[];
category: Category;
}


@Component({
selector: 'app-category-picker',
templateUrl: './category-picker.component.html',
styleUrls: ['./category-picker.component.scss']
})
export class CategoryPickerComponent implements OnInit {

// Does not follow main/sub category - just has a simple category!
@Input() categoryID: number;
@Output() categoryIDChange:EventEmitter<number> = new EventEmitter<number>();

nestedTreeControl: NestedTreeControl<CategoryNode>;

nestedDataSource: MatTreeNestedDataSource<CategoryNode>;

constructor(
private dataBrokerService: DataBrokerService
) {
this.nestedTreeControl = new NestedTreeControl(node => of(node.children));
this.nestedDataSource = new MatTreeNestedDataSource();
}

ngOnInit() {
this.dataBrokerService.getCategories().subscribe(categories => this.nestedDataSource.data = this.buildTree(categories));
}

onChange(){
this.categoryIDChange.emit(this.categoryID);
}

private buildTree(categories:Category[]):CategoryNode[]{
console.log("tree");

let tree:CategoryNode[] = [];
let map: {[s:number]: CategoryNode} = {};

// Build an index of the nodes
categories.forEach(cat => {
map[cat.id] = {children:[], category:cat};
});

// Start adding nodes to tree
for (let key of Object.keys(map)){
let catNode = map[+key];

if (map[catNode.category.parent_id]){
// Add it to the parent
map[catNode.category.parent_id].children.push(catNode);
}
else{
// Add it to root
tree.push(catNode);
}
};
console.log(tree);
return tree;
}
}

最佳答案

原来我错误地实现了 MatTreeNodeDef 的 'when' 函数。在我的 HTML 中,我需要将 when: node.children.length 更改为 when: hasNestedChild ,它被定义为 = (_: number, nodeData) => {在 .ts 文件中返回 nodeData.children.length}。换句话说,when 是一个必需的参数,它采用具有两个 输入(数字和节点)的函数。

关于Angular 6 Material 树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50809370/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com