在Angular 9中使表格内容可编辑,可以通过以下步骤实现:
<table>
<tr *ngFor="let item of items">
<td>
<input [(ngModel)]="item.name" [disabled]="!item.editable" />
</td>
<td>
<input [(ngModel)]="item.age" [disabled]="!item.editable" />
</td>
<td>
<button (click)="toggleEdit(item)">编辑</button>
</td>
</tr>
</table>
export class AppComponent {
items = [
{ name: 'John', age: 25, editable: false },
{ name: 'Jane', age: 30, editable: false },
{ name: 'Bob', age: 35, editable: false }
];
toggleEdit(item) {
item.editable = !item.editable;
}
}
input[disabled] {
background-color: #eee;
}
通过以上步骤,就可以在Angular 9中实现表格内容的编辑功能。当点击编辑按钮时,对应的数据项的editable属性会切换,从而使输入框可编辑或不可编辑。用户可以直接在输入框中修改内容,并实时更新到数据模型中。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云数据库MySQL版(TencentDB for MySQL)。
腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整配置,支持多种操作系统,适用于各类应用场景。详情请参考:腾讯云云服务器
腾讯云数据库MySQL版(TencentDB for MySQL):提供稳定可靠的MySQL数据库服务,支持高可用架构和自动备份,具备高性能和高可扩展性。详情请参考:腾讯云数据库MySQL版
领取专属 10元无门槛券
手把手带您无忧上云