取消对话框时更新数据 - Angular Material

Question

我遇到了以下问题，不幸的是我看不出这里出了什么问题。

我有一个 Material 对话框，可以在其中编辑给定的列表，可以添加、删除或修改项目）。在我的对话框中有两个按钮：Cancel 和 Submit.

我希望在单击 Cancel 时删除 所有更改，并且我不希望我的列表被修改。

我有以下代码：

constructor(public dialog: MatDialog) { }

@Input() myData: MyObjectType;

 openDialog() {
    const dialogRef = this.dialog.open(MyDialogComponent, {
        width: 'auto',
        data: { 'dataINeed': this.myData}
    });
    dialogRef.afterClosed().subscribe(rp => {
       console.log(rp);
}

这是我的 MyDialogComponent:

constructor(
    public dialogRef: MatDialogRef<MyDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { 'dataINeed': MyObjectType},
) { }

deleteItem(item: ItemType) {
    this.data.itemListe.forEach(o => {
        if (o === item) {
            const index = this.data.itemListe.indexOf(o);
            this.data.itemListe.splice(index, 1);
        }
    });
}

valueChange(updatedValue: string, item: ItemType): void {
    this.data.itemListe[this.data.itemListe.indexOf(item)].propertyfield = updatedValue;
}

addItem() {
    const newItem: ItemType= {
        a: '',
        b: '',
        c: '',
        d: false,
        e: ''
    };
    this.data.itemListe.push(newItem);
}

onCancel() {
    this.dialogRef.close();
}

onSubmit() {
    this.dialogRef.close({ data: this.data })
}


<div class="material-dialog">
<h2 class="mat-dialog-title">My item list</h2>
    <p>Items:</p>
    <div id="mat-list-item-container" *ngFor="let item of data.itemListe"
        class="grid-container-two-delete grid-container">
        <mat-form-field appearance="outline" style="padding-right: 1em;">
            <input matInput (change)="valueChange($event.target.value, item)" [value]="item.c">
        </mat-form-field>
        <mat-icon svgIcon="delete_red" (click)="deleteItem(item)">
        </mat-icon>
    </div>
    <button mat-button (click)="addItem()">
        <mat-icon svgIcon="add_circle"></mat-icon>&nbsp;&nbsp;
        Add item
    </button>
</div>
<br>
<mat-dialog-actions>
    <div class="grid-container-two">
        <div class="grid-item-left"><button class="button--secondary" type="button"
                (click)="onCancel()">Cancel</button>
        </div>
        <div class="grid-item-right"><button mat-button (click)="onSubmit()">OK</button></div>
    </div>
</mat-dialog-actions>

当我测试它并删除一些项目，并重写其他项目的 propertyfield 并在最后单击 Cancel 时，我的对话框关闭了。如果我通过父组件再次打开它，我的更改就在那里。我不明白为什么，因此我没有在我的关闭方法中发回任何数据。

我试图创建我的列表的深层副本并对其进行操作，但那没有用。

我做错了什么？

非常感谢！

Answer 1

您可能希望在将数据传递给您的模式之前克隆您的数据：

constructor(public dialog: MatDialog) { }

@Input() myData: MyObjectType;

 openDialog() {
    const dialogRef = this.dialog.open(MyDialogComponent, {
        width: 'auto',
        data: { 'dataINeed': cloneDeep(this.myData)}
    });
    dialogRef.afterClosed().subscribe(rp => {
       console.log(rp);
}

我通常使用 lodash 库中的 cloneDeep 进行深度克隆。这会将克隆的对象传递给对话框，而不是对您的数据的引用。这样，一旦它关闭，将数据返回给父级的唯一方法 component/service 就是从对话框中获取结果

取消对话框时更新数据 - Angular Material

Data gets updated when dialog is cancelled - Angular Material

typescript

angular-material

angular