下面是一个示例的解决方法,展示了如何创建一个Angular可重用材料表格,其中包含多行删除复选框:
npm install @angular/material @angular/cdk
import { NgModule } from '@angular/core';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTableModule } from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
MatCheckboxModule,
MatTableModule,
MatButtonModule
],
exports: [
MatCheckboxModule,
MatTableModule,
MatButtonModule
]
})
export class MaterialModule { }
TableComponent
:import { Component } from '@angular/core';
export interface UserData {
id: number;
name: string;
progress: string;
color: string;
}
const ELEMENT_DATA: UserData[] = [
{id: 1, name: 'User 1', progress: '50%', color: 'red'},
{id: 2, name: 'User 2', progress: '75%', color: 'blue'},
{id: 3, name: 'User 3', progress: '100%', color: 'green'},
];
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
displayedColumns: string[] = ['select', 'id', 'name', 'progress', 'color'];
dataSource = ELEMENT_DATA;
selectedRows: UserData[] = [];
toggleRow(row: UserData) {
if (this.isSelected(row)) {
this.selectedRows = this.selectedRows.filter(r => r != row);
} else {
this.selectedRows.push(row);
}
}
isSelected(row: UserData) {
return this.selectedRows.includes(row);
}
deleteSelectedRows() {
this.dataSource = this.dataSource.filter(r => !this.isSelected(r));
this.selectedRows = [];
}
}
table.component.html
:
0 && selectedRows.length < dataSource.length">
ID
{{element.id}}
Name
{{element.name}}
Progress
{{element.progress}}
Color
{{element.color}}
TableComponent
:
这样就创建了一个Angular可重用材料表格多行删除复选框的示例。当用户选择复选框并