当对话框被取消时，数据会被更新-角材料

Question

我正面临以下问题，不幸的是，我看不出这里有什么问题。

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

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

我有以下代码：

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);
}

我通常会使用cloneDeep来创建一个深入的克隆。这将将克隆的对象传递给对话框，而不是对数据的引用。这样，一旦它被关闭，将数据返回到父组件/服务的唯一方法就是从对话框中获取结果。