用ngModel角度對話框綁定

Question

我有一個可以使用角度對話框進行編輯的項目，但是問題是當我打開編輯對話框時，所做的更改會自動顯示在我的UI中，保存后我想更改，因為如果更改並單擊“取消”，則該更改保持不變。 當我注入數據並保存時，可以在下面找到代碼。 我在對話框中所做的更改會立即覆蓋更改，保存這些更改后我將不希望更改。

這是打開編輯對話框。

 openprojecteditdialog(project) {
 this.dialog.open(ProjectEditDialogComponent, {
  data: project, disableClose: true});
 }

這是編輯對話框的模板：

<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Project">
  <div id="general-content">
    <mat-input-container>
      <label>*Name</label>
      <input placeholder="" matInput [(ngModel)]="project.name">
    </mat-input-container>
    <br>
    <mat-input-container>
      <label>*Type</label>
      <mat-select class="tab-content-item" placeholder="" matInput 
   [(ngModel)]="project.type">
        <mat-option *ngFor="let type of projectsType; let i = index" 
  [value]="i">
          {{type}}
        </mat-option>
      </mat-select>
    </mat-input-container>
    <br>
    <mat-input-container>
      <label>*State</label>
      <mat-select class="tab-content-item" placeholder="" matInput 
  [(ngModel)]="project.state">
          <mat-option *ngFor="let state of projectsState; let i 
 =index" [value]="i">
          {{state}}
        </mat-option>
      </mat-select>
    </mat-input-container>
  </div>
 </mat-tab>
 </mat-tab-group>
 </mat-dialog-content>
 <mat-dialog-actions>
  <button mat-button mat-dialog-close (click)="save()" 
 [disabled]="project.name.length === 0">Save</button>
 <button mat-button mat-dialog-close>Cancel</button>
 </mat-dialog-actions>

這是編輯對話框的TS文件。

export class ProjectEditDialogComponent implements OnInit {

readonly projectsState = ProjectState;
readonly projectsType = ProjectType;
readonly level: string[] = [];
working = false;
newType = '';
newState = '';
constructor(
public store: Store<ApplicationState>,
public dialogRef: MatDialogRef<ProjectEditDialogComponent>[],
@Inject(MAT_DIALOG_DATA) public project: any) {
}
ngOnInit() {
}
save() {
if (this.project.name.length > 0) {
  this.working = true;
  this.project.ProjectType = this.newType;
  this.project.ProjectState = this.newState;
  this.store.dispatch(new UpsertProjectInternalAction(this.project));
}
}
}

Answer 1

您正在編輯對話框中傳遞原始項目的參考。 因此，即使您不保存，它也會反映出更改。 創建項目數據的副本，以使其不會與原始項目反映。 保存后，更新原始項目所需的字段。

openprojecteditdialog(project) {
  let editProject = Object.assign({}, project);
  this.dialog.open(ProjectEditDialogComponent, {
  data: editProject, disableClose: true});
}

保存功能將是

save() {
  if (this.editProject.name.length > 0) {
   this.working = true;
   this.project.ProjectType = this.editProject.newType;
   this.project.ProjectState = this.editProject.newState;
   this.store.dispatch(new UpsertProjectInternalAction(this.project));
  }
}