角材料垫单元点击事件

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