Question

我对用户表具有编辑功能。当我使用对话框组件（edit组件）编辑用户时，它们之间的通信非常好（带有新值的控制台日志），但是我的表没有刷新并且始终显示旧值。

我无法使用stackblitz进行演示，因为我的应用需要导入很多东西才能工作。

这是我的代码的一部分：

HTML

 <mat-dialog-content [formGroup]="form">
    <mat-form-field class="full-width-input">
      <input id="firstName" matInput placeholder="First name" formControlName="f_name">
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="middleName" matInput placeholder="Middle name" formControlName="m_name">

    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="lastName" matInput placeholder="Last name" formControlName="l_name">

    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="email" matInput placeholder="Email" formControlName="email">
    </mat-form-field>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button class="mat-raised-button" (click)="close()">Close</button>
    <button class="mat-raised-button mat-primary" (click)="save()">Save</button>
  </mat-dialog-actions>
</div>

打开对话框的主要组件（我认为这里有些遗漏）

  openEditDialog(user) {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = [ this.dataSource.data, user];

    const dialogRef = this.dialog.open(EditUserDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
      val => {
             console.log(val) // new good value here 
                             // I think it miss something here
      })
  }

编辑组件

  save() {
    if (this.form.valid) {
      this.formSubmitAttempt = true;
      this.dialogRef.close(this.form.value);  // send updated value to main component
    }
  }

我需要更新包含一个对象数组（用户）的dataSource.data。之后，我想用：

更新它

this.dataSource.data = [... this.dataSource.data];

这是表格的

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows >

      <!-- First name Column -->
      <ng-container matColumnDef="f_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> First name </th>
        <td mat-cell *matCellDef="let element"> {{element.f_name}} </td>
        <label>
          <input class="table-input" *ngIf="selectedUser" type="text">
        </label>
      </ng-container>

      <!-- Middle name Column -->
      <ng-container matColumnDef="m_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Middle name </th>
        <td mat-cell class="status" *matCellDef="let element">{{element.m_name}}</td>
      </ng-container>

      <!-- Last name Column -->
      <ng-container matColumnDef="l_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Last name </th>
        <td mat-cell *matCellDef="let element"> {{element.l_name}} </td>
      </ng-container>

      <!-- Email Column -->
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
        <td mat-cell *matCellDef="let element"> {{element.email}} </td>
      </ng-container>

      <!-- Role Column -->
      <ng-container matColumnDef="role">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Role </th>
        <td mat-cell *matCellDef="let element"> {{element.role}} </td>
      </ng-container>


      <!-- Actions Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
        <td mat-cell *matCellDef="let row">
          <button mat-raised-button color="primary" class="editUserBtn" (click)="openEditDialog(row)"><mat-icon class="edit-icon" >launch</mat-icon><span>Edit</span></button>
          <button mat-raised-button color="warn" class="deleteUserBtn" (click)="onDelete(row)"><mat-icon class="delete-icon" >delete_outline</mat-icon><span>Delete</span></button>
        </td>
      </ng-container>

</div>

接收数据后刷新表

0 个答案: