Заполнение angular дерева материалов из HttpClient приводит к ошибке TypeError

Question

Я пытаюсь настроить компонент angular на основе дерева материалов Angular, которое получает данные из HTTP-запроса GET. Однако я продолжаю сталкиваться с этой ошибкой:

TypeError: Cannot read property 'indexOf' of undefined
    at FlatTreeControl.getDescendants (tree.js:93)

Для простоты я начал с примера Дерево с флажками из https://material.angular.io/components/tree/examples. Затем я (удалил параметр «добавить новый элемент» и) заменил источник данных очень простым клиентом Http:

import { HttpClient } from '@angular/common/http';

export interface Odata {
  '@GrcOdataService.context': string;
  value: object[];
}

@Injectable({
  providedIn: 'root'
})
export class GrcOdataService {

  private _host : string = 'http://localhost:8080/grcodata/';

  constructor(private httpClient: HttpClient) { }

  public get(entitySet: string){
    return this.httpClient.get<Odata>(this._host + entitySet);
  }
}

Observable подписан в конструкторе:

constructor(private _odata:GrcOdataService, private _database:ChecklistDatabase) {
    this.treeFlattener = new MatTreeFlattener(
      this.transformer,
      this.getLevel,
      this.isExpandable,
      this.getChildren);

    this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    
    // _database.dataChange.subscribe(data => {
    //   console.log(data)
    //   this.dataSource.data = data;
    // })

    _odata.get('AMIs').subscribe(data => {
      console.log(data);
      console.log(this.buildManagementStructure(data));
      this.dataSource.data = this.buildManagementStructure(data);
    });
  }

Функция buildManagementStructure преобразует значения odata в дерево (уровни задают путь):

private buildManagementStructure(data: Odata): OrgNode[] {
    var mgmntStructure = new Array<OrgNode>();
    var group = new OrgNode();
    group.name = 'Management Structure';
    group.children = new Array<OrgNode>();
    mgmntStructure.push(group);

    data.value.forEach(element => {
      var keys = ['Level_1', 'Level_2', 'Level_3', 'Level_4', 'Level_5'];

      var path = new Array<string>();
      keys.forEach(key => {
        if (element[key]) path.push(element[key]);
      });

      var node = group;

      path.forEach(segment => {
        var segmentNode = node.children.find(child => child.name === segment);
        if (!segmentNode) {
          segmentNode = new OrgNode();
          segmentNode.name = segment;
          segmentNode.children = new Array<OrgNode>();
          node.children.push(segmentNode);
        }
        node = segmentNode;
      });

      var leaf = new OrgNode();
      leaf.name = element['Unique_ID'] + ' ' + element['Company_Name']
      node.children.push(leaf);
      node = group;
    });
    return mgmntStructure;
  }

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

    // _database.dataChange.subscribe(data => {
    //   console.log(data)
    //   this.dataSource.data = data;
    // })

По-видимому, сначала загрузка данных примера, а затем их перезапись решает проблему. Поэтому я предполагаю, что проблема как-то связана с асинхронным выполнением кода. Но честно говоря, я понятия не имею, что делаю не так (я новичок). У вас есть предложения, что мне делать?

Заранее благодарю

Фабиан

Answer 1

Теперь я заменил образец данных пустым массивом, и проблема также исчезла:

    this.dataSource.data = [];

Это устранило проблему - надеюсь. Хотя меня это все еще озадачивает.