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

Question

Я новичок в stackoverflow, и это мой первый вопрос здесь. У меня есть три столбца в моей таблице матов: ключ, значение и значок редактирования. После нажатия на иконку редактирования я получаю поле ввода для редактирования. Теперь я хочу получить эти редактируемые данные после нажатия кнопки обновления в отдельных переменных в файле TS. Но получая "undefind".

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

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

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

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