从下拉列表中过滤重复值

Question

我有一个 ColumnDef：

  relatedToolsColumns: ColumnDef[] = [

  { field: 'toolId', name: 'Tool Number', type: 'dropdown', optionsList: this.tools, optionsListField: 'id', optionsListName: 'toolNo', width: '70%' },

  {

     field: 'delete', name: 'Delete', type: 'icon-button', width: '30%', sortingDisabled: true, icon: 'delete',

     callback: this.deleteRelatedTool.bind(this)

  }];

我正在使用端点调用“getGageNoList”订阅这些工具：

 ngOnInit() {

  this.tool = this.data.tool;

  this.readonly = this.data.readonly;

 

  this.tprecmApiService.getGageNoList()

     .subscribe((val) => {

        this.tools = val;

        this.relatedToolsColumns

           .find((column: ColumnDef) => column.field === 'toolId')

           .optionsList = this.tools;

     });

  }

这就是我所拥有的工具： 工具数组

这就是我在工具显示的 UI 中所拥有的，当前从下拉列表中选择了两个相同的工具编号。 UI 添加工具显示

The Dropdown list of tools： 网格中工具的下拉列表

我需要将这些下拉列表过滤为仅那些尚未显示在网格上的下拉列表。

Answer 1

this.tools.filter((tool, index, arr) => arr.findIndex(t => t.toolNo === tool.toolNo) === index)将为您提供一个数组，其中与之前的工具编号相同的工具被过滤掉，因为 findIndex 返回与该函数匹配的第一个项目。

Answer 2

用一些小的js你可以过滤它们if (!(dropdownTool in toolsArray)) { ... } // push to array you send to HTTML to loop in