要解决Angular Material可展开表格行上的操作按钮不起作用的问题,可以按照以下步骤进行操作:
确保每个操作按钮都被正确地绑定到相应的方法上。
确保操作按钮所在的父元素具有正确的点击事件绑定。
在展开的行上添加一个点击事件,以阻止事件冒泡。
下面是一个示例代码,演示了如何解决此问题:
HTML模板:
{{ column }}
{{ element[column] }}
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
dataSource = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' }
];
displayedColumns = ['id', 'name'];
expandedElement: any;
toggleRow(element: any) {
this.expandedElement = this.expandedElement === element ? null : element;
}
editItem(element: any) {
console.log('Edit:', element);
}
deleteItem(element: any) {
console.log('Delete:', element);
}
}
在上面的代码中,展开的行中的操作按钮已经正确地绑定到editItem
和deleteItem
方法上,并且展开的行上添加了一个点击事件,以阻止事件冒泡。这样,操作按钮就可以正常地起作用了。