Question

我有一个可以使用对话框角度进行编辑的项目，但是问题是，当我打开编辑对话框时，所做的更改会自动显示在我的UI中，保存后我想更改，因为如果更改并单击“取消”，则该选项仍然存在改变了。

在下面的代码中，当我注入数据并保存时。

我在对话框中所做的更改会立即覆盖更改，我希望保存后这些更改将继续存在。

这里是打开编辑对话框。

updateEntry(entry: Entry) {
const dialogRef = this.dialog.open(UpdateDialogComponent, { minWidth: "400px", maxWidth: "600px" });
dialogRef.componentInstance.entry = entry;
dialogRef.afterClosed().subscribe(result => {
if (result != null) {
 this.spinner.show();
this._dnsaasService.updateEntry(entry.domain_id, entry.id, entry).subscribe(res => {
  this.spinner.hide();
  this.toastr.success("Entry successfully updated");
  this.store.dispatch(new LoadDomainEntries(this.currentState.currentDomain));
},
  error => {
    setTimeout(() => {
      /** spinner ends after 5 seconds */
      this.spinner.hide();
    }, 1000);
  }

);

 }
});
 }

这是编辑对话框的模板：

 <h1 mat-dialog-title>{{'DNS.Update entry' | translate }}</h1>
 <div mat-dialog-content fxLayout="row" fxLayoutAlign="center center">
 <form name="updateEntryForm" #formControl="ngForm" fxLayout="column"  fxFlex="100">
    <mat-form-field>
        <mat-label>Type</mat-label>
        <mat-select placeholder="type" [(ngModel)]="entry.type" [disabled]="true" name="type">
            <mat-option value="A">A</mat-option>
            <mat-option value="CNAME">CNAME</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field>
        <mat-label>Hostname</mat-label>
        <input matInput [(ngModel)]="entry.fqdn" [disabled]="true" name="hostname">
    </mat-form-field>
    <mat-form-field *ngIf="entry.type == 'A'">
        <mat-label>{{'DNS.IP address' | translate }}</mat-label>
        <input matInput [(ngModel)]="entry.value" name="value" required [pattern]="valueForTypeAPattern"
            #uname="ngModel">
        <mat-error *ngIf="uname.errors?.pattern">
            {{'DNS.Value not valid' | translate }}
        </mat-error>
    </mat-form-field>
    <mat-form-field *ngIf="entry.type == 'CNAME'">
        <mat-label>FQDN cible</mat-label>
        <input matInput [(ngModel)]="entry.value" name="value" required [pattern]="valueForTypeCNAMEPattern"
            #uname="ngModel">
        <mat-error *ngIf="uname.errors?.pattern">
            {{'DNS.Value not valid' | translate }}
        </mat-error>
    </mat-form-field>
    <mat-form-field>
        <mat-label>TTL</mat-label>
        <mat-select placeholder="ttl" [(ngModel)]="entry.ttl" name="ttl">
            <mat-option value="300">5 min</mat-option>
            <mat-option value="3600">{{'DNS.1 hour' | translate }}</mat-option>
            <mat-option value="86400">{{'DNS.1 day' | translate }}</mat-option>
        </mat-select>
    </mat-form-field>
</form>
</div>
 <div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button (click)="onCancelClick()">{{'DNS.Cancel' | translate }}</button>
<button mat-raised-button color="primary" [mat-dialog-close]="formControl" [disabled]="formControl.invalid">{{'DNS.Update'
    | translate }}</button>

这是编辑对话框的TS文件。

 updateEntry(entry: Entry) {
const dialogRef = this.dialog.open(UpdateDialogComponent, { minWidth: "400px", maxWidth: "600px" });
dialogRef.componentInstance.entry = entry;
dialogRef.afterClosed().subscribe(result => {
  if (result != null) {
    this.spinner.show();
    this._dnsaasService.updateEntry(entry.domain_id, entry.id, entry).subscribe(res => {
      this.spinner.hide();
      this.toastr.success("Entry successfully updated");
      this.store.dispatch(new LoadDomainEntries(this.currentState.currentDomain));
    },
      error => {
        setTimeout(() => {
          /** spinner ends after 5 seconds */
          this.spinner.hide();
        }, 1000);
      }

    );

  }
});
  }

请帮助解决此问题。

谢谢您的时间

Answer 1

在这一行

dialogRef.componentInstance.entry = entry;

您要在父类中分配entry变量，以供对话框类中的entry变量引用。

这意味着在存储级别上两者是相同的，因此对一个模型的编辑将“出现”在“另一”模型中。

解决方案是复制父变量entry，或在对话框中使用一组不同的变量，然后在保存时将它们返回给父变量。

请注意，更改变量名称不会对此产生影响，它是=分配。

Answer 2

之所以发生这种情况，是因为您将entry对象的引用设置为dialogRef.componentInstance.entry。

dialogRef.componentInstance.entry = entry; // this line sets the reference

所以只需将其更改为：

dialogRef.componentInstance.entry = { ...entry };

OR

dialogRef.componentInstance.entry = Object.assign(entry);

OR

如果您正在使用lodash库，则：

dialogRef.componentInstance.entry = _.cloneDeep(entry);

注意：请记住，成功关闭对话框时必须设置值。

用ngModel绑定角度对话框关闭

2 个答案: