以下是一个示例代码,展示了如何在Angular中只在点击的那一行上启用按钮:
HTML模板:
{{item.name}}
{{item.description}}
组件类:
export class YourComponent {
items = [
{ name: 'Item 1', description: 'Description 1' },
{ name: 'Item 2', description: 'Description 2' },
{ name: 'Item 3', description: 'Description 3' }
];
selectedIndex: number = -1;
onRowClick(index: number) {
this.selectedIndex = index;
}
}
在上面的代码中,我们使用*ngFor
指令在表格中循环遍历items
数组,并使用(click)
事件监听器在每一行上绑定onRowClick
方法。当点击某一行时,onRowClick
方法会将点击行的索引赋值给selectedIndex
变量。
在按钮元素上,我们使用了[disabled]
属性绑定,当selectedIndex
不等于当前行的索引时,按钮会被禁用。
这样,只有点击的那一行上的按钮才会被启用,其他行上的按钮都会被禁用。