角材料垫单元单击事件

Question

我有一个类似

的表格

<ng-container matColumnDef="position">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell *matCellDef="let row"> 
        {{row.position}} 
  </mat-cell>

但是我想要类似的东西。如果单击该单元格，则该单元格将仅成为该行的输入字段。

<ng-container matColumnDef="position">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>

  <mat-cell *matCellDef="let row" (click)="flag = true"> 
    <ng-container
      *ngIf="flag ? clicked : notClicked">
    </ng-container>

    <ng-template #notClicked>
      <div>
        {{row.position}} 
      </div>
    </ng-template>

    <ng-template #clicked>
      <div>
        <input matInput placeholder="Favorite food" value="{{row.position}}">
      </div>
    </ng-template>

  </mat-cell>

我该怎么办？

注意：我想避免在*.ts文件中编写逻辑。

Answer 1

PrimeNG提供了一些很棒的组件，例如可编辑表，如果您单击单元格，它将变成一个输入字段。

参考： https://www.primefaces.org/primeng/#/table/edit