Как редактировать данные ячейки мата в angular

Question

У меня есть 2 столбца в моей таблице матов: ключ и значение. Я хочу отредактировать часть значения после нажатия на значок кнопки «Редактировать» и консоли, после нажатия на кнопку «Обновить».

html file

<div>
    <button mat-stroked-button class="b1" (click)="update()">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">
            <td mat-cell *matCellDef="let element"> {{element.value}} </td>

            <mat-form-field floatLabel="never" *ngIf="isValid">
                <input matInput placeholder="Value" [value]="element.value" [(ngModel)]="element.value">
            </mat-form-field>
        </ng-container>     



            <ng-container matColumnDef="actions">
                <mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
                <mat-cell *matCellDef="let row">
                  <button mat-icon-button matTooltip="Click to Edit" (click)="onCreateInput()" 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>

ts file

isValid:boolean=false
  onCreateInput()
  {
    this.isValid=true;
  }
  update()
  {
    console.log("Hello")
  }

Answer 1

Может быть, если вы отключите вход вместо того, чтобы не делать рендеринг, может быть полезно, если это вам не поможет, может быть, вы можете поделиться репо или стекабликом, чтобы помочь вам достичь его

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

И на ваших file:

   toggleValid() {
     this.isValid = !this.isValid;
   }

Может быть лучше, чем назначить true

edit

, это поможет с полным https://stackblitz.com/edit/angular-ifrzkl-bmsx3d?file=src%2Fapp%2Ftable-basic-example.html