Angular Material2 关闭带有编辑表单的对话框仍然更改父 table 行传递数据

Question

我通过将 table 行数据传递给它打开了一个带有编辑表单的对话框。当我关闭对话框而不保存编辑时，它仍然更改了父 html.

中的 table 行数据

这是我的代码示例：

https://stackblitz.com/edit/angular-material2-table-to-dialog-dzy4dh

父 HTML 页面：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 ">
  ... ...
  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
              (click)="openDialog(row)"></tr>
</table>

带有编辑表单的对话框：

<div class="basic-container">
  <mat-form-field>
    <input matInput placeholder="Name" [(ngModel)]="data.name">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Weight" [(ngModel)]="data.weight">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Symbol" [(ngModel)]="data.symbol">
  </mat-form-field>

  <button mat-button (click)="closeDialog()">Close</button>
</div>

然后我尝试通过 Angular Material2 文档示例中的两种数据绑定方式创建带有编辑表单的对话框。关闭对话框时，没有影响父 html 数据，就像我想要的那样：

https://stackblitz.com/edit/angular-arsgs2

父 HTML 页面：

<ol>
  <li>
    <mat-form-field>
      <input matInput [(ngModel)]="animal" placeholder="Your favorite animal?">
    </mat-form-field>
  </li>
  <li>
    <button mat-raised-button (click)="openDialog()">Pick one</button>
  </li>
  <li *ngIf="animal">
    You chose: <i>{{animal}}</i>
  </li>
</ol>

对话框编辑表单页面：

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Answer 1

尝试这样的事情：

DEMO

这里使用_updateChangeSubscription方法。

app.component.ts:

 dialog.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      console.log(result)
      if (result) {
        this.dataSource.data[result.position - 1] = result
        this.dataSource._updateChangeSubscription();
      }
    });

样本-dailog.component.html:

    <mat-form-field>
        <input matInput placeholder="Name" [(ngModel)]="name">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="Weight" [(ngModel)]="weight">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="Symbol" [(ngModel)]="symbol">
    </mat-form-field>


    <div mat-dialog-actions>
        <button mat-button (click)="closeDialog()">Close</button>
        <button mat-button [mat-dialog-close]="{position: data.position, name: name, weight: weight, symbol: symbol}" cdkFocusInitial>Ok</button>
    </div>

样本-dailog.component.ts:

  name: any;
  weight: any;
  symbol: any;
  constructor(
    public dialogRef: MatDialogRef<SampleDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
  ) {
    this.name = this.data.name;
    this.weight = this.data.weight;
    this.symbol = this.data.symbol;
  }

  ngOnInit() {
    console.log('Dialog got', this.data);
  }

  closeDialog() {
    this.dialogRef.close();
  }

Angular Material2 关闭带有编辑表单的对话框仍然更改父 table 行传递数据

Angular Material2 Closing a dialog with an edit form still changed parent table row passing data

angular-material2

angular