在HTML模板中,应使用ngIf指令来显示或隐藏表格的不同状态(例如:编辑状态和非编辑状态)。此外,在Angualr组件中添加对应的方法来控制表格的显示状态。下面是一个示例:
在模板中:
{{item.value}}
在组件中:
export class AppComponent {
items = [
{value: 'item 1', editMode: false},
{value: 'item 2', editMode: false},
{value: 'item 3', editMode: false},
];
enableEditMode(item) {
item.editMode = true;
}
disableEditMode(item) {
item.editMode = false;
}
}
在此示例中,当点击“Edit”按钮时,item.editMode
的值将变为true,这将导致对应的td元素上的输入框被显示。当失去输入框焦点(即blur
事件)时,disableEditMode
方法将会被调用,并将item.editMode
的值设置为false,这将导致输入框消失并表格恢复到非编辑状态。