Question

我正在尝试在Angular Material中传递两个字符串。 Mat对话框内容中的HTML代码是创建2个cdk下拉列表，可以在数组之间交换值。

我针对相同的问题经历了这个答案，并试图解决这个问题，但是没有成功。 How to pass data to dialog of angular material 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内容的代码。

<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-dialog。

此外，我不希望mat-dialog为显示创建其自己的displayColumns和availableColumns副本，因为我正在使用这些字符串数组来更改Angular Material Table的显示列。

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>

无法在角度材质的“材质”对话框中传递数据

1 个答案: