【问题标题】：Selecting and Unselecting values from a multi select dropdown in Angular 7从Angular 7中的多选下拉列表中选择和取消选择值
【发布时间】：2020-02-17 23:58:20
【问题描述】：

我做了一个多选下拉菜单，如下所示

 MyFilter{
      key: string;      // uniquely identifies selected filter among many filters on page
      order: number;    // display order of filter on page
      options: DropListOption[];  // options in a dropdown
      values: DropListOption[];   // selected values from dropdown
    }  

 DropListOption{
    label: string;  // name of option
    value: any;     //value of option
   }

我已经实现了一个在选中或取消选中复选框时调用的方法，如下所示：

onSelect(key: string, option: DropListOption): void{
  const filtersOpt = this.filters;  // type of filter is MyFilter
  filtersOpt.map((filter) => {
    if(filter.key === key){
      const selected: boolean = !!filter.values.find((opt) => opt.value === option.value);
      filters.values = selected  // filters.values used as property binding to display number of selected values
                      ? filters.values.filter((opt) => opt.value !== option.value)
                      : [...filters.values, option];
    }
    return filter;
  });
  this.updateFilters.emit(filtersOpt); //emitting to parent component
}

虽然我的逻辑运行良好，但对 Angular/RxJS（前端开发）不熟悉，但我不太确定我的代码是否是好的代码。请你让我知道我们的想法或纠正我。如果有人能告诉我实现 onSelect() 方法的更好方法，我将不胜感激。

【问题讨论】：

标签： angular functional-programming rxjs rxjs-pipeable-operators

【解决方案1】：

我不完全确定可以在您的 html 中进行任何改进以进一步简化此方法，因为您没有展示它，但公然地说我会这样做。

解决方案 #1

由于使用了 Array.prototype.findIndex() 方法，此解决方案与 Internet Explorer 不兼容。有关兼容的解决方案，请参阅解决方案 #2。

onSelect(key: string, option: DropListOption): void {
    const filterOpt = this.filters.find(fil => fil.key === key);
    if (!filterOpt) {
        console.warn('No filter was found with the given key.');
        return;
    }

    const selectedOptIdx =  filterOpt.values.findIndex(opt => opt.value === option.value);

    if (selectedOptIdx > -1) {
        filters.splice(selectedOptIdx, 1);
    } else {
        filters.push(option);
    }
}

优点

不太复杂的解决方案。
总体而言，可读性略好。

解决方案 #2

onSelect(key: string, option: DropListOption): void {
    const filterOpt = this.filters.find(fil => fil.key === key);
     if (!filterOpt) {
        console.warn('No filter was found with the given key.');
        return;
    }

    const selectedOpt = filterOpt.values.find(opt => opt.value === option.value);

    if (selectedOpt) { 
        filters.splice(filters.indexOf(selectedOpt), 1);
    } else {
        filters.push(option);
    }
}

优点

与 Internet Explorer 兼容。

总的来说，我想说有一些更好的方法可以完成，我建议您阅读一些 Array.prototype 方法的复杂性，以便您可以更好地了解您在此过程中所做的选择并尝试更好地理解 Array.prototype.map() 方法的作用，特别是。我将在下面留下来源。

来源

拼接和过滤器（和copyWithin）之间的性能比较。 (link)
关于 javascript 数组方法的复杂性的讨论。 (link)

来自 MDN 文档页面的 Array.prototype.map() (link)

(...) map 按顺序为数组中的每个元素调用一次提供的回调函数，并根据结果构造一个新数组。回调仅针对已分配值（包括未定义）的数组索引调用。 (...)

【讨论】：