问题描述: 我在使用Angular Material的表格组件时遇到了一个问题。我想在表格中添加一个开关,以便用户可以切换某些行的状态。我尝试了一些代码示例,但无法使其正常工作。请问有什么解决方法吗?
解决方法: 你可以使用Angular Material的mat-slide-toggle组件来实现表格中的开关功能。以下是一个解决方法的示例代码:
import { MatTableModule } from '@angular/material/table';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@NgModule({
imports: [
MatTableModule,
MatSlideToggleModule
],
...
})
export class YourModule { }
export interface Item {
name: string;
status: boolean;
}
export class YourComponent implements OnInit {
dataSource: Item[] = [
{ name: 'Item 1', status: false },
{ name: 'Item 2', status: true },
{ name: 'Item 3', status: false }
];
displayedColumns: string[] = ['name', 'status'];
...
}
Name
{{ item.name }}
Status
这样,你就可以在表格中使用开关来切换每一行的状态了。
希望这个解决方法对你有帮助!