angular - 角材料垫单元点击事件
问题描述
我有一张像
<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
文件中编写逻辑。
解决方案
PrimeNG 提供了一些很棒的组件,例如可编辑表,如果您在其中单击一个单元格,它就会变成一个输入字段。
推荐阅读
- magento - Magento 1 - 为什么默认的联系我们路径是“/contacts”?
- unix - 将差异与抑制通用行和上下文选项并排结合
- docker - 更新 Jenkins 后 Docker 停止工作
- python - Python 无法在 PowerShell 中工作以键入脚本
- r - R图形:如何使VennDiagram中的对象与cowplot plot_grid兼容?
- laravel - Laradock:Laravel 队列工作者无法连接到 RabbitMQ
- php - 如何更改产品
- typescript - 具有特定类型的休息参数
- django - 在 django 后视图上保存自定义多对多表单
- java - Java 机器人可执行 jar 文件未按预期工作