Как сохранить данные отредактированной строки таблицы матов в переменной

Question

У меня есть таблица матов, которая содержит 3 столбца: Ключ, Значение и значок редактирования. Когда я нажимаю на иконку редактирования, то часть значения редактируется. Теперь после нажатия кнопки «Обновить» я хочу сохранить значение всех отредактированных ячеек в переменных, чтобы я мог передать его в свой бэкэнд для обновления данных в базе данных. Как я могу этого достичь? Ниже приведен мой код:

вот моя ссылка на стек: *

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

official.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;
  }

То, что вы делаете неправильно, вы объявляете переменный элемент, но не присваиваете ему никакого значения.

Вот код стека, в котором я внес некоторые изменения

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

Надеюсь, это поможет!

Answer 2

У вас уже есть двусторонняя привязка с использованием [(ngModel)] на element.value, поэтому каждое изменение ввода должно быть отражено в объекте element в вашей машинописи ... Так в чем же проблема?

Редактировать: вместо логирования this.value, лог this.dataSource.