时间戳

首页 > 解决方案 > Angular 8 树：从 JSON 文件加载数据

angular - Angular 8 树：从 JSON 文件加载数据

问题描述

作为一个 Angular/Typescript/OOP 初学者而不是专家，我有几个 JSON 文件，每个文件代表手册的目录。在“文档”组件中，我想为用户选择的文档加载目录。

表示 JSON 结构的接口/类，...

export interface link {
  name:string;
  url:string;
  hasChildren:boolean;
  link?:link[];
 }

... 适用于 mat-nested-tree，使用静态数据进行测试，如此处的示例所示（请参阅“带有嵌套节点的树”）。

export class TreeNestedOverviewExample {
  treeControl = new NestedTreeControl<link>(node => node.link); // very simple structure links as children of link
  dataSource = new MatTreeNestedDataSource<link>();

  constructor() {
    this.dataSource.data = TREE_DATA; // works when TREE_DATA is defined as a const
  }
}

这是我的 ngOnChanges 片段：

ngOnChanges(changes) {
    if (changes.indexfile) {
      console.log('infi: '+this.indexfile); // shows expected filename
      this._userdocService.getToc(this.indexfile)
        .subscribe(data => {
          this.dataSource.data.push(data as link);
          console.log('ngOnChanges: '+JSON.stringify(data)); //shows expected JSON
        
      });
    }

我能够从 ngOnChanges() 中的服务（但不能在 ngOnInit() 中）接收 JSON 数据作为订阅的 Observable。它在控制台中正确显示数据。

但是，我无法将收到的数据分配给 mat 树。

我想用几句话知道您作为专家如何对此进行建模，我错过了什么？

标签： angulardata-bindingangular-material

解决方案

问题是 dataSource 需要内存中的新对象来呈现。解决方法是在内存中设置一个新数组

this.dataSource.data.push(data as link);
this.dataSource.data = [...this.dataSource.data];

推荐阅读