Angular过滤器逻辑处理

在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;
    })
  }
发布了18 篇原创文章 · 获赞 1 · 访问量 3826

猜你喜欢

转载自blog.csdn.net/qq_36398269/article/details/102806743