在html里使用过滤器组件
<nz-dropdown [nzTrig`在这里插入代码片`ger]="'hover'" >
<p nz-dropdown>
<i class="anticon anticon-caret-down"></i>//选中后对吼
</p>
<ul nz-menu class="ant-table-dropdown-menu">
<li (click)="mainFrameFilter('')" nz-menu-item>
<i *ngIf="hostChecked == ''" ></i> 全部</li>
<span *ngFor="let item of mainFrame">
<li (click)="mainFrameFilter(item)" nz-menu-item>
<i *ngIf="hostChecked == item" ></i>{{item}}</li>
</span>
</ul>
</nz-dropdown>
写JS逻辑:
确定所需要筛选的字段
//主机筛选
mainFrameFilter(item) {
this.hostChecked = item;
this.getAlarmManagement();//重新获取列表函数
}
在获取列表函数里对字段进行去重处理
// 请求获取告警管理列表
getAlarmManagement(reset: boolean = false): void {
if (reset) {
this.alarmManagementParams.pageNum = 1;
}
if (this.hostChecked != "") {
this.alarmManagementParams.hostNameS = this.hostChecked;
} else {
this.alarmManagementParams.hostNameS = '';
}
this.alarmManagementService.getAlarmManagementList(this.alarmManagementParams).subscribe(data => {
if (data.result) {
this.total = data.result.total;
this.dataList = data.result.data;
//拿出主机字段
for (let i = 0; i < this.total; i++) {
this.hostNameS.push(data.result.data[i]['host_nodename']);
//主机字段去重
if (this.mainFrame.indexOf(this.hostNameS[i]) == -1) {
this.mainFrame.push(this.hostNameS[i]);
}
}
}
}, (err) => {
this.messageService.create('error', err.error.message);
this.confirmLoading = false;
})
}