Дерево Angular 8: загрузка данных из файла JSON

Question

Как человек, который скорее является новичком в Angular / Typescript / OOP, чем экспертом, у меня есть несколько файлов JSON, каждый из которых представляет собой оглавление для руководства. В компоненте 'doc' я хочу загрузить оглавление для документа, выбранного пользователем.

Интерфейс / класс, который представляет структуру JSON, ...

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

... отлично работает с мат-вложенным деревом, проверено нормально со статическими данными, как в примере здесь (см. «Дерево с вложеннымузлы ').

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
        
      });
    }

Я могу получить данные JSON в качестве подписанного Observable от службы в ngOnChanges () (но не в ngOnInit ()). Он правильно показывает данные в консоли.

Однако я не могу присвоить полученные данные дереву матов.

Хотелось бы в нескольких словах узнать, как вы, как эксперт, смоделируете это, чего мне не хватает?

Answer 1

Проблема в том, что источнику данных для рендеринга необходим новый объект в памяти. Решение состоит в том, чтобы установить новый массив в памяти

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