Question

我有Angular前端，可以从Lumen后端获取数据：

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

Angular-获取父组件在初始化后接收数据

1 个答案: