我第二次打开对话框后，才会显示“材料”对话框中的“材料树”

Question

我正在尝试使用Angular material 7 tree ，当我按下一个对话框时，该对话框具有一个材料树，该材料树仅在我第二次打开对话框时显示，除树中的所有其他元素均在第一次加载时显示尝试。

我尝试将树的加载移动到OnInit和AfterViewInit方法，但是似乎没有任何解决方法。

打开对话框的按钮：

<button mat-icon-button>
      <i class="material-icons edit" (click)="openModal(item.id)">edit</i>
</button>

<button id="fabNew" mat-fab color="accent" (click)="openModal()"><i class="material-icons">add</i></button>

打开对话框的方法：

openModal(id?: number) {
if(id) {
  const editDialog = this.dialog.open(DialogComponent, {
    minWidth: '30%',
    data: {
      title: 'Edit',
      id: id
    }
  });
} else {
  const newDialog = this.dialog.open(DialogComponent, {
    minWidth: '30%',
    data: {
      title: 'New',
      id: null
    }
  });
}
}

dialog.component.html：

<h2 mat-dialog-title>{{title}}</h2>
<mat-dialog-content class="mat-typography">
<div class="input-container">
  <mat-form-field>
    <input matInput placeholder="Role" value="">
    <button disabled mat-icon-button matSuffix>
      <mat-icon>vpn_key</mat-icon>
    </button>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Description" value="">
    <button disabled mat-icon-button matSuffix>
      <mat-icon>description</mat-icon>
    </button>
  </mat-form-field>
</div>

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
    <button mat-icon-button disabled></button>
    <mat-checkbox class="checklist-leaf-node"
                  [checked]="checkListSelection.isSelected(node)"
                  (change)="todoLeafItemSelectionToggle(node)">{{ nodo.item }}</mat-checkbox>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle>
      <mat-icon>
        {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
      </mat-icon>
    </button>
    <mat-checkbox [checked]="descendantsAllSelected(node)"
                  [indeterminate]="descendantsPartiallySelected(node)"
                  (change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
  </mat-tree-node>
</mat-tree>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button color="accent" mat-button mat-dialog-close>Cancel</button>
  <button color="accent" mat-raised-button>Save</button>
</mat-dialog-actions>

dialog.component.ts onInit方法

 ngOnInit() {

this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandible, this.getChildren);
this.treeControl = new FlatTreeControl<MenuFlatNodo>(this.getLevel, this.isExpandible);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
this.menutreeService.dataChange.subscribe(
  data => {
    this.dataSource.data = data;
  }
)
}

输出是在我第一次打开对话框时显示树，而不是在所有内容加载到视图后第二次显示树