如何仅在模板驱动表单Angular 12中单击编辑时才能编辑表行？

在模板驱动表单Angular 12中，要实现仅在单击编辑时才能编辑表行，可以通过以下步骤实现：

1. 首先，在模板中为每一行的编辑按钮绑定一个点击事件，例如(click)="editRow(row)"。
2. 在组件类中，定义一个变量来表示当前正在编辑的行，例如editingRow: any。
3. 在点击编辑按钮的事件处理函数editRow(row)中，将当前行的数据赋值给editingRow变量，表示该行正在被编辑。
4. 在模板中，使用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>

1. 在组件类中，实现保存按钮的事件处理函数saveRow()，在该函数中完成保存编辑后的数据，并将editingRow变量重置为null，表示编辑状态结束。

editRow(row: any) {
  this.editingRow = { ...row };
}

saveRow() {
  // 保存编辑后的数据
  // ...

  this.editingRow = null;
}

通过以上步骤，就可以实现仅在单击编辑时才能编辑表行的功能。在编辑状态下，表行会显示可编辑的表单控件，保存后恢复为静态文本。这种方式可以提高用户体验，避免了一次性展示所有表单控件的冗杂感。

对于Angular 12的模板驱动表单，腾讯云提供了云开发（CloudBase）服务，它是一款全托管的云端一体化开发平台，提供了丰富的后端服务和前端开发框架支持。您可以使用云开发来快速搭建和部署Angular应用，并结合云开发的数据库服务来存储和管理表格数据。详情请参考腾讯云云开发产品介绍：云开发产品介绍。