Angular - Получить родительский компонент, получить данные после инициализации

Question

У меня есть Angular front end, который выбирает данные из Lumen backend:

ngAfterViewInit() {

    merge()
      .pipe(
        startWith({}),
        switchMap(() => {
          this.isLoadingResults = true;
          return this.exampleDatabase!.getRepoIssues(this.itemId);
        }),
        map(data => {
          this.isLoadingResults = false;
          this.isRateLimitReached = false;

          return data;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          this.isRateLimitReached = true;
          return observableOf([]);
        })
      ).subscribe(
      data => this.applyDataChanges(data)
    );
  }

  private applyDataChanges(data: any) {
    let tree = [];

    for(let b of data.buildings) {
      let children = [];
      for(let c of b.buildings){
        children.push(new ChecklistNodeModel(c.name, false))
      }
      tree.push(new ChecklistNodeModel(b.group.name, false, children));
    }

    this.TREE_DATA = tree;

    this.itemId > 0 ?
      this.form = data as ControllingCompanyNewsModel :
      this.form = new ControllingCompanyNewsModel(0,null,'','','', data.buildings);
  }

Родительский компонент имеет следующее свойство, которое затем проходит через привязку @Input к дочернему компоненту:

  <app-checklist-tree [treeData]="TREE_DATA"></app-checklist-tree>

и

  @Input() treeData = [];

Вопрос по одной причине: дочерний компонент имеет пустое свойство treeData.В то время как родительский компонент имеет свойства, обновленные правильно.

Может кто-нибудь посоветовать, где я допустил ошибку?Спасибо!

Добавление кода дочернего компонента

export class ChecklistTreeComponent implements AfterViewInit, OnChanges {

  @Input() treeData = [];
  @Output() treeDataChange = new EventEmitter<ChecklistNodeModel[]>();
  levels = new Map<ChecklistNodeModel, number>();
  treeControl: FlatTreeControl<ChecklistNodeModel>;

  treeFlattener: MatTreeFlattener<ChecklistNodeModel, ChecklistNodeModel>;

  dataSource: MatTreeFlatDataSource<ChecklistNodeModel, ChecklistNodeModel>;

  constructor(private changeDetectorRef: ChangeDetectorRef) {
    this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
      this.isExpandable, this.getChildren);
    this.treeControl = new FlatTreeControl<ChecklistNodeModel>(
      this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    // this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    this.dataSource.data = this.treeData;
  }



  getLevel = (node: ChecklistNodeModel): number => {
    return this.levels.get(node) || 0;
  };

  isExpandable = (node: ChecklistNodeModel): boolean => {
    return node.children.value.length > 0;
  };

  getChildren = (node: ChecklistNodeModel) => {
    return node.children;
  };

  transformer = (node: ChecklistNodeModel, level: number) => {
    this.levels.set(node, level);
    return node;
  }

  hasChildren = (index: number, node: ChecklistNodeModel) => {
    return this.isExpandable(node);
  }

  /** The selection for checklist */
  checklistSelection = new SelectionModel<ChecklistNodeModel>(true /* multiple */);

  /** Whether all the descendants of the node are selected */
  descendantsAllSelected(node: ChecklistNodeModel): boolean {
    const descendants = this.treeControl.getDescendants(node);
    if (!descendants.length) {
      return this.checklistSelection.isSelected(node);
    }
    const selected = this.checklistSelection.isSelected(node);
    const allSelected = descendants.every(child => this.checklistSelection.isSelected(child));
    if (!selected && allSelected) {
      this.checklistSelection.select(node);
      this.changeDetectorRef.markForCheck();
    }
    return allSelected;
  }

  /** Whether part of the descendants are selected */
  descendantsPartiallySelected(node: ChecklistNodeModel): boolean {
    const descendants = this.treeControl.getDescendants(node);
    if (!descendants.length) {
      return false;
    }
    const result = descendants.some(child => this.checklistSelection.isSelected(child));
    return result && !this.descendantsAllSelected(node);
  }

  /** Toggle the selection. Select/deselect all the descendants node */
  nodeSelectionToggle(node: ChecklistNodeModel): void {
    node.checked = !node.checked;
    this.checklistSelection.toggle(node);
    const descendants = this.treeControl.getDescendants(node);
    if(this.checklistSelection.isSelected(node)) {
      this.checklistSelection.select(...descendants, node);
      for(let descendant of descendants) {
        this.nodeSelectionToggle(descendant);
      }
    } else {
      this.checklistSelection.deselect(...descendants, node);
      for(let descendant of descendants) {
        this.nodeSelectionToggle(descendant);
      }
    }
    this.changeDetectorRef.markForCheck();
  }

  ngAfterViewInit(): void {
    this.dataSource.data = this.treeData;
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.dataSource.data = changes.treeData.currentValue;
  }


}

Answer 1

Реализуйте это в родительском компоненте

//import CheckListTreeComponent
//Import viewChild from angular core
export class ParentClass {
      @ViewChild(ChecklistTreeComponent)
      private tree : ChecklistTreeComponent;

      constructor(){}
      //
}

На данный момент вы уверены, что родительский компонент получил значение

this.tree.update(this.TREE_DATA)

В дочернем компоненте

update(value){
     this.treeData = value;
}