Angular Material Dialog - Редактировать значение в диалоге не должно автоматически обновляться в строке таблицы

Question

Я не очень знаком с Angular Material. Но в моем новом приложении я использую его, и теперь я сталкиваюсь с некоторыми проблемами с диалогом.

У меня есть таблица с несколькими строками, и я хочу ее редактировать. Когда я нажимаю на Edit, открывается диалоговое окно, и я должен иметь возможность редактировать данные. Есть две кнопки действий, скажем, Отмена и Обновление.

Обновление должно сохранить данные, закрыть диалоговое окно и отобразить обновленные данные в таблице.

Отмена должна просто закрыть диалоговое окно.

<div *ngFor="let attachment of doc.attachments; let i = index" fxFlex="grow" fxLayout="row" >
    <div fxFlex="auto">{{attachment.note}}</div>
    <button mat-menu-item (click)="editAttachmentNote(attachment)"> 
         <span>Edit</span>
    </button>    
</div>

openEditDialog(attachment): void {
    let dialogRef = this.dialog.open(AttachmentComponent, {
        data: { attachment: attachment }
    });

    dialogRef.afterClosed().subscribe((result: any) => {
        console.log(result);
        if(result){
            this.doc = result;
        }
    });
}

editAttachmentNote(attachment) {
    this.openEditDialog(attachment);
}

=== компонент вложения ===

export class AttachmentUploadComponent {
      constructor(public dialogRef: MatDialogRef<AttachmentComponent>,
                @Inject(MAT_DIALOG_DATA) public data: any,
                private http: HttpClient) {

          if(!data.attachment) {
               data.attachment = new AttachmentDto();
               this.disableUpload  = false;
          }
          else {
               this.disableUpload  = true;
          }
      }
     onCancelClick() {
        this.dialogRef.close();
     }
}

<mat-form-field class="full-width">
    <textarea [(ngModel)]="data.attachment.note" [disabled]="!fileToUpload && !disableUpload" matInput matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="3" placeholder="Note">
    </textarea>
</mat-form-field>

<button fxFlex="nogrow" mat-button (click)="onCancelClick()">Cancel</button>
<button *ngIf="disableUpload" fxFlex="nogrow" mat-button cdkFocusInitial (click)="updateAttachmentNote()">
    Update
</button>

Но здесь я вижу, что когда я редактирую данные в диалоговом окне, данные автоматически обновляются в таблице, которую я вижу в фоновом режиме.

Кто-нибудь может здесь помочь?

Answer 1

Вы передаете ссылку в диалоговом окне, поэтому при любых изменениях attachment это будет отражаться автоматически.

Чтобы избежать этого, вы можете передавать значение только путем изменения кода следующим образом:

editAttachmentNote(attachment) {
    this.openEditDialog(JSON.parse(JSON.stringify(attachment)));
}