Дерево материалов в диалоге материалов отображается только после второго открытия диалогового окна. - PullRequest
Новая
       27

Дерево материалов в диалоге материалов отображается только после второго открытия диалогового окна.

0 голосов
/ 01 июня 2019

Я пытаюсь использовать Угловой материал 7, дерево , когда я нажимаю кнопку, появляется диалоговое окно, в котором есть дерево материалов, которое отображается только при повторном открытии диалогового окна, все остальное, кроме дерево загружается с первой попытки.

Я попытался переместить загрузку дерева в метод 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;
  }
)
}

Вывод должен показывать дерево в первый раз, когда я открываю диалог, а не во второй раз после того, как все загрузилось в представлении

...