如何将已编辑的mat表行的数据存储在变量中

Question

我有一个包含 3 列的 mat 表：键、值和编辑图标。 当我单击编辑图标时，值部分是可编辑的。现在单击更新按钮后，我想将所有已编辑单元格的值存储在变量中，以便我可以将其传递给我的后端以更新数据库中的数据。我怎样才能做到这一点？ 以下是我的代码：

这是我的 stackblitz 链接：

https://stackblitz.com/edit/angular-ifrzkl-tg4eha?file=src%2Fapp%2Ftable-basic-example.ts

approval.componenet.html

<div>
    <button mat-stroked-button class="b1" (click)="update()" formtarget="_blank">Update</button>
    <h5>Request Details</h5>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="key">
        <td mat-cell *matCellDef="let element" class="item-name"> {{element.key}} </td>
        </ng-container>

        <ng-container matColumnDef="value" >
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element" > 
              <span *ngIf="!element.editable; else editPlace">
              {{element.value}} 
              </span>
              <ng-template #editPlace>
                <input [(ngModel)]="element.value" (keyup.enter)="element.editable = false">
              </ng-template>
            </td>
          </ng-container>


          <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
            <mat-cell *matCellDef="let element">
              <button mat-icon-button matTooltip="Click to Edit" (click)="edit(element)" class="iconbutton" color="primary">
                  <mat-icon aria-label="Edit">edit</mat-icon>
                </button>
            </mat-cell>
          </ng-container>


        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

approval.component.ts

edit(e: any) {
    e.editable = !e.editable;
  }

  update()
  {
    const usr=this.value;
    console.log(usr);
  }

Answer 1

您需要对代码进行一些更改

在 HTML 中的变化

<input [(ngModel)]="element.value" (keyup.enter)="element.editable = false">

到

<input [(ngModel)]="element.value" (keyup.enter)="element.editable = false" (change)="changeValue(element.value)" >

在 TS 中：

添加此功能：

  changeValue(event: any){
       this.element = event;
  }

你做错的事情是你声明了变量元素，但你没有给它分配任何值。

这是我进行了一些更改的 stackblitz 代码

https://stackblitz.com/edit/angular-ifrzkl-gfzcug

希望这会有所帮助！

Answer 2

您已经在element.value 上使用[(ngModel)] 进行双向绑定，因此对输入的每次更改都应反映在组件打字稿中的element 对象中...那么这里有什么问题？

编辑：不是记录this.value，而是记录this.dataSource。