Невозможно передать данные в диалоге материалов в угловой материал

Question

Я пытаюсь передать две строки в Angular Material.HTML-код в содержимом Mat Dialog предназначен для создания 2 раскрывающихся списков cdk, в которых значения можно обменивать между массивами.

Я прошел через этот ответ для аналогичной проблемы и попытался реализовать ее, но она не сработала. Как передать данные в диалог углового материала 2

Это мой код для класса диалога, а также класса, где вызывается класс диалога.

export class TableComponent implements OnInit {
   displayedColumns: string[] = ['A', 'B', 'C'];
   availableColumns: string[] = [];

   openDialog() {
     const dialogRef = this.dialog.open(ColumnsDialog, {
     width: '500px',
     height: '500px',
     data: {
       displayedColumns: this.displayedColumns,
       availableColumns: this.availableColumns
     },
     });
   }  

  @Component({
  selector: 'columns-dialog',
  templateUrl: 'columns-dialog.html',
  changeDetection:ChangeDetectionStrategy.OnPush
 })

 export class ColumnsDialog {
   constructor(public dialogRef: MatDialogRef<ColumnsDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

   onCloseClick(): void {
    this.dialogRef.close(true);
  }


 drop(event: CdkDragDrop<string[]>) {
   if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, 
    event.currentIndex);
   } else {
     transferArrayItem(event.previousContainer.data,
                    event.container.data,
                    event.previousIndex,
                    event.currentIndex);
   }
 } 
}

Это мой код содержимого диалогового окна.

<mat-dialog-content>
<div >
    <h2>Unselected Columns</h2>

                    <div
                      cdkDropList
                      #availableColumnsList="cdkDropList"
                      [cdkDropListData]="availableColumns"
                      [cdkDropListConnectedTo]="[displayedColumnsList]"

                      (cdkDropListDropped)="drop($event)">
                      <div  *ngFor="let item of availableColumns" cdkDrag>{{item}}</div>
                    </div>
                  </div>

                  <div >
                    <h2>Selected Columns</h2>

                    <div
                      cdkDropList
                      #displayedColumnsList="cdkDropList"
                      [cdkDropListData]="displayedColumns"
                      [cdkDropListConnectedTo]="[availableColumnsList]"

                      (cdkDropListDropped)="drop($event)">
                      <div *ngFor="let item of displayedColumns" cdkDrag>{{item}}</div>
                    </div>
                  </div>
 </mat-dialog-content>

Когда я передаю строки displayColumns и availableColumns, я хочу 2 раскрывающихся списка cdk, в которых значения массива displayeColumns могут быть переданы в доступные столбцы и наоборот.Я смог добиться этого, когда использовал раскрывающееся меню для кнопки, при нажатии которой открывается это диалоговое окно, поэтому я знаю, что код для раскрывающихся списков cdk работает.Я думаю, что проблема заключается в передаче данных в диалог mat.

Кроме того, я не хочу, чтобы диалог mat создавал свою собственную копию displayColumns и availableColumns для отображения, так как я использую эти строкимассивы для изменения отображаемых столбцов таблицы угловых материалов.

Answer 1

Данные диалога, предоставляемые диалогу через объект MatDialogConfig при открытии диалога, обычно являются копией «оригинальных» данных.Таким образом, изменения, сделанные в диалоге, ограничиваются только диалогом.Стандартный способ использовать MatDialog для изменения «исходных» данных - через функции MatDialogRef close() и afterClosed().

close() вызываться с измененными данными диалога.Вы можете передать все, что захотите, но обычно вы передаете объект данных, который вы ввели в класс диалога, или какую-то его часть: на

this.dialogRef.close(this.data);

afterClosed() следует подписаться, чтобы обработчик вызывался, когдадиалог закрыт.Обработчик получает данные, переданные в close(), а затем обычно использует их для обновления «исходных» данных:

dialogRef.afterClosed().subscribe(result => {
  // do something with the result
});

Обработчик будет срабатывать только при вызове close().Обычно в вашем диалоге для этого есть кнопка закрытия.Нажатие вне диалогового окна или нажатие клавиши escape не является действием «закрыть» (это действие «отменить»), поэтому обработчик не будет (и не должен) вызываться.

Ваш код не выполняетлюбой из этого.У вас есть функция, которая закрывает диалог, но она передает значение 'true', а не данные диалога, и в любом случае она нигде не вызывается, поскольку вы не реализовали обработчик для закрытия диалога.

Комуисправить это, выполнив следующее:

TableComponent

displayedColumns: string[] = ['A', 'B', 'C'];
availableColumns: string[] = [];

openDialog() {
  const dialogRef = this.dialog.open(ColumnsDialog, {
    width: '500px',
    height: '500px',
    data: {
      displayedColumns: this.displayedColumns,
      availableColumns: this.availableColumns
    },
  });

  dialogRef.afterClosed().subscribe(result => {
    this.displayedColumns = result.displayedColumns,
    this.availableColumns = result.availableColumns
  });
}

ColumnsDialog

constructor(public dialogRef: MatDialogRef<ColumnsDialog>,
  @Inject(MAT_DIALOG_DATA) public data: any) {}

onCloseClick(): void {
  this.dialogRef.close(this.data);
}

Вы также, конечно, должны использовать функцию onCloseClick() из кнопки в вашем диалоге:

<div mat-dialog-actions>
    <button mat-button (click)="onCloseClick()">Update</button>
</div>

Вы можете сделать это полностью с HTML, если хотите, поэтому вам не нужно определять функцию:

<div mat-dialog-actions>
    <button mat-button [mat-dialog-close]="data">Update</button>
</div>