在模板驱动表单Angular 12中,要实现仅在单击编辑时才能编辑表行,可以通过以下步骤实现:
(click)="editRow(row)"
。editingRow: any
。editRow(row)
中,将当前行的数据赋值给editingRow
变量,表示该行正在被编辑。ngIf
指令来判断是否处于编辑状态,如果是,则显示可编辑的表单控件,否则显示静态文本。<table>
<tr *ngFor="let row of data">
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>
<button (click)="editRow(row)">编辑</button>
</td>
</tr>
</table>
<div *ngIf="editingRow">
<input [(ngModel)]="editingRow.name" placeholder="姓名">
<input [(ngModel)]="editingRow.age" placeholder="年龄">
<button (click)="saveRow()">保存</button>
</div>
saveRow()
,在该函数中完成保存编辑后的数据,并将editingRow
变量重置为null
,表示编辑状态结束。editRow(row: any) {
this.editingRow = { ...row };
}
saveRow() {
// 保存编辑后的数据
// ...
this.editingRow = null;
}
通过以上步骤,就可以实现仅在单击编辑时才能编辑表行的功能。在编辑状态下,表行会显示可编辑的表单控件,保存后恢复为静态文本。这种方式可以提高用户体验,避免了一次性展示所有表单控件的冗杂感。
对于Angular 12的模板驱动表单,腾讯云提供了云开发(CloudBase)服务,它是一款全托管的云端一体化开发平台,提供了丰富的后端服务和前端开发框架支持。您可以使用云开发来快速搭建和部署Angular应用,并结合云开发的数据库服务来存储和管理表格数据。详情请参考腾讯云云开发产品介绍:云开发产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云