angular - Angular 7 多选下拉菜单

Question

Angular 2/4/5/6/7：我正在使用多选下拉菜单。无法使用下拉列表中的选定项目过滤数据。我正在分享 stackblitz 链接，请帮助我，我是 Angular 新手。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;
     }
}