Javascript 显示大数据时角度材质树出错
我构建了一个角度材质树数据,其中包含深度>6的子对象和重要长度,如:Javascript 显示大数据时角度材质树出错,javascript,angular,typescript,angular-material,Javascript,Angular,Typescript,Angular Material,我构建了一个角度材质树数据,其中包含深度>6的子对象和重要长度,如: const TREE_DATA: FoodNode[] = [ { name: 'Fruit', children: [ {name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}, ] }, { name: 'Vegetables', children: [ {
const TREE_DATA: FoodNode[] = [
{
name: 'Fruit',
children: [
{name: 'Apple'},
{name: 'Banana'},
{name: 'Fruit loops'},
]
}, {
name: 'Vegetables',
children: [
{
name: 'Green',
children: [
{name: 'Broccoli'},
{name: 'Brussel sprouts'},
]
}, {
name: 'Orange',
children: [
{name: 'Pumpkins'},
{name: 'Carrots'},
]
},
]
},
....
];
尝试显示树时:
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
{{node.name}}
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li>
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.name}}
</div>
<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
{{node.name}
{{treeControl.isExpanded(节点)?'expand_more':'chevron_right'}
{{node.name}
我收到超过最大调用堆栈大小的错误:
如果有人能帮忙的话,我无法修复这个bug?这意味着在代码中的某个地方,您正在调用一个函数,而该函数反过来又调用另一个函数,以此类推,直到达到调用堆栈限制。或者
如果您不小心导入/嵌入了同一个JavaScript文件两次,您有时可能会遇到这种情况,值得在inspector的“资源”选项卡中进行检查。
请提供一个演示,我/我们可以在其中重现一个问题!当使用嵌套树且树的数据太大时,会抛出RangeError:超出最大调用堆栈大小错误,并且某些节点呈现时没有内容,因此我找到的解决方案是使用平面树。看来带有扁平节点的树可以处理大数据。@a.oubela您能创建一个stackblitz演示来重现这个问题吗?