Javascript 接收数据后刷新表

我的用户表有一个编辑功能。 当我用我的对话框组件（编辑组件）编辑我的用户时，他们之间的通信很好（控制台日志带有新值），但我的表不会刷新，并且总是显示旧值

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

这是我代码的一部分：

Html

编辑组件

  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]

这里是表格的HTML

  <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>

名字
{{element.f_name}
中名
{{element.m_name}
姓
{{element.l_name}
电子邮件
{{element.email}
角色
{{element.role}
行动
发射
删除大纲删除

关闭模式后，必须更新表格。我知道，但是，我不知道怎么做，这就是我为什么要发表评论的原因“这里遗漏了什么”；-）你能提供你的表格代码吗？如果它是一个数组，并且您正在添加一些内容，那么在数组中进行简单的推送将更新您的列表。如果它是一个版本，您可以用它的索引替换该项。我需要更新包含对象（用户）数组的dataSource.data，并在共享表代码后刷新它。

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

  <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>