Question

我对Angular Material不太熟悉。但在我的新应用程序中，我正在使用它，现在我面临着对话的一些挑战。

我有一个包含多行的表格，我想对其进行编辑。当我点击编辑时，应该打开一个对话框，我应该能够编辑数据。有两个操作按钮，分别为取消和更新。

更新应该保存数据，关闭对话框并在表格上显示更新的数据。

取消只需关闭对话框。

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

角度材质对话框 - 对话框上的编辑值不应自动在表格行上更新

1 个答案: