Question

角度2/4/5/6/7：我正在使用多选下拉菜单。无法使用下拉菜单中的所选项目过滤数据。我正在分享stackblitz链接，请帮助我，我是新手。 https://stackblitz.com/edit/angular-2nbeax?file=src%2Fapp%2Fworkspace%2Fworkspace-type%2Fworkspace-type.component.ts

Answer 1

尝试使用此技术。我没有进一步研究，您也可以优化此代码，但目前，我正在为此使用for循环。

this.workspaceTypeService.getData(this.filtered)
      .subscribe(data => {this.showWorkspace = data;
        // console.log(this.showWorkspace);
        // code for filter
        this.filtered = this.showWorkspace;
      });

在项目选择上

onItemSelect (item: any) {
     if(this.selectedItems.length > 0){
       this.filtered = [];
      for(var i=0; i<this.selectedItems.length; i++){
        for(var j=0; j<this.showWorkspace.length; j++){
          if((this.showWorkspace[j].Wtype).toLowerCase() === (this.selectedItems[i].itemName).toLowerCase()){
            this.filtered.push(this.showWorkspace[j]);
          }
        }
      }
     }else{
       this.filtered = this.showWorkspace;
     }
  }

在项目上取消选择

  OnItemDeSelect(item: any) {
    if(this.selectedItems.length > 0){
       this.filtered = [];
      for(var i=0; i<this.selectedItems.length; i++){
        for(var j=0; j<this.showWorkspace.length; j++){
          if((this.showWorkspace[j].Wtype).toLowerCase() === (this.selectedItems[i].itemName).toLowerCase()){
            this.filtered.push(this.showWorkspace[j]);
          }
        }
      }
     }else{
       this.filtered = this.showWorkspace;
     }
}

Angular 7多选下拉菜单

1 个答案: