要使用Angular Material Chips实现多列过滤器,可以按照以下步骤进行操作:
npm install @angular/material @angular/cdk
app.module.ts
文件中导入所需的Angular Material模块:import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
app.module.ts
文件的imports
数组中添加这些导入的模块:imports: [
// ...
MatChipsModule,
MatFormFieldModule,
MatInputModule,
MatIconModule
]
{{ column }}
cancel
在上面的示例中,columns
是一个包含所有列名的数组。addColumn()
方法用于添加新的列名,而removeColumn()
方法用于移除已有的列名。
columns
数组以及相应的方法:import { Component } from '@angular/core';
@Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.css']
})
export class FilterComponent {
columns: string[] = [];
addColumn(event: MatChipInputEvent) {
const input = event.input;
const value = event.value;
// Add column name
if ((value || '').trim()) {
this.columns.push(value.trim());
}
// Reset the input value
if (input) {
input.value = '';
}
}
removeColumn(column: string) {
const index = this.columns.indexOf(column);
if (index >= 0) {
this.columns.splice(index, 1);
}
}
}
在上面的示例中,addColumn()
方法将从输入框中获取到的值添加到columns
数组中。removeColumn()
方法将从columns
数组中移除指定的列名。
通过按照以上步骤进行操作,就可以在Angular中使用Angular Material Chips实现多列过滤器了。