angular - Angular 材质树视图不起作用(expandedData 为空)
问题描述
我有附加的 .ts 文件和模板。我的代码曾经工作过,很长一段时间,它突然停止工作。来自 Angular 的材料站点的示例代码运行良好,并且比较了工作示例和我的代码,我的代码中的扩展数组为空。不知道为什么。请有人可以告知为什么它停止工作。
我正在使用 API 调用从我的后端收集数据,并且它非常大(以前运行良好),我已将其添加为常量进行测试。
我的打字稿控制器:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { FlatTreeControl } from '@angular/cdk/tree';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
interface TopicNode {
id:number;
ks_key: string;
item_text_display:string;
item_text_link:string;
order:number;
page_id:number;
children?: TopicNode[];
}
interface ExampleFlatNode {
expandable: boolean;
name: string;
order: number;
page_id:number;
}
const teststring : TopicNode[] = [
{
id: 947,
ks_key: "Science_Key_Stage_1",
item_text_display: "Working Scientifically",
item_text_link: "Working Scientifically",
order: 1,
page_id: 1,
children: [{
id: 948,
ks_key: "Science_Key_Stage_1",
item_text_display: "Science",
item_text_link: "Science",
order: 2,
page_id: 510,
children: []
},
{
id: 949,
ks_key: "Science_Key_Stage_1",
item_text_display: "Observe",
item_text_link: "Observe",
order: 2,
page_id: 511,
children: [{
id: 950,
ks_key: "Science_Key_Stage_1",
item_text_display: "Properties",
item_text_link: "Property",
order: 3,
page_id: 390,
children: [{
id: 951,
ks_key: "Science_Key_Stage_1",
item_text_display: "Texture",
item_text_link: "Texture",
order: 4,
page_id: 452,
children: []}]
}]
}
]}]
@Component({
selector: 'app-kslist',
templateUrl: './kslist.component.html',
styleUrls: ['./kslist.component.scss']
})
export class KslistComponent implements OnInit {
private _transformer = (node: TopicNode, level: number) => {
return {
expandable: !!node.children && node.children.length > 0,
name: node.item_text_display,
order: node.order,
page_id: node.page_id
};
}
treeControl = new FlatTreeControl<ExampleFlatNode>(node => node.order, node => node.expandable);
treeFlattener = new MatTreeFlattener(
this._transformer, node => node.order, node => node.expandable, node => node.children);
dataSource1 = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
constructor(private route: ActivatedRoute, private backendService: BackendService) {
}
catagories: any;
subject: string="";
title: string = "";
ngOnInit() {
this.title = "Test";
this.dataSource1.data = teststring;
console.log(this.dataSource1);
}
hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
}
和模板:
<div class="ksheader">
<h1>{{title}}</h1>
</div>
<mat-tree [dataSource]="dataSource1" [treeControl]="treeControl">
<p>test</p>
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
<p>test2</p>
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
<!-- non parent -->
<a *ngIf="node.page_id!=1" href="page/{{node.page_id}}">
{{node.name}}
</a>
<div *ngIf="node.page_id==1">
{{node.name}}
</div>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.item_text_display">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<!-- parent -->
<a *ngIf="node.page_id!=1" href="page/{{node.page_id}}">
{{node.name}}
</a>
<div *ngIf="node.page_id==1">
{{node.name}}
</div>
</mat-tree-node>
</mat-tree>
请有人建议,这需要很长时间才能排序。
谢谢,
解决方案
推荐阅读
- c# - 将面板位置设置为鼠标位置
- python - 在python中隐藏烛台图表上的悬停数据
- firebase - Firebase 和 Google Analytics - 缺少 measureId?
- java - Spring WebClient 配置 Okta OAuth2
- deep-learning - problem on training(first epoch take a long time more than 4 hours )using colab and fastai
- google-colaboratory - Google Colab 上同一个笔记本的训练时间有时会发生变化
- powershell - 使用 Powershell 调用命令,从外部文件加载 -Computername 变量不起作用
- sqlite - 如何删除数据 React Native SQLite
- postgresql - 多个 DELETE 语句的 Postgres 变量
- tkinter - 如何在 tkinter 的输入框中禁用用户输入?