Angular Material是一个UI组件库,提供了一系列现成的UI组件,包括复选框(Checkbox)。使用Angular Material复选框过滤数据源的步骤如下:
npm install @angular/material @angular/cdk
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
并将它们添加到@NgModule的imports数组中。
<mat-checkbox [(ngModel)]="isChecked">只显示已选中的数据</mat-checkbox>
<mat-form-field>
<input matInput [(ngModel)]="filterText" placeholder="过滤关键字">
</mat-form-field>
filteredData: any[];
filterData() {
if (this.isChecked) {
this.filteredData = this.dataSource.filter(item => item.name.includes(this.filterText) && item.checked);
} else {
this.filteredData = this.dataSource.filter(item => item.name.includes(this.filterText));
}
}
在上面的代码中,filterData方法根据isChecked和filterText变量来过滤数据源。如果isChecked为true,则只显示已选中的数据;如果isChecked为false,则显示所有数据。同时,根据filterText变量来过滤数据源中的名称。
<mat-checkbox [(ngModel)]="isChecked" (ngModelChange)="filterData()">只显示已选中的数据</mat-checkbox>
<mat-form-field>
<input matInput [(ngModel)]="filterText" (ngModelChange)="filterData()" placeholder="过滤关键字">
</mat-form-field>
通过以上步骤,你可以使用Angular Material复选框过滤你的数据源。根据具体的业务需求,你可以进一步定制和优化过滤逻辑。
领取专属 10元无门槛券
手把手带您无忧上云