Выбор и отмена выбора значений из раскрывающегося списка множественного выбора в Angular 7

Question

Я сделал раскрывающийся список с множественным выбором, который реализован, как показано ниже

 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
}

Хотя мой лог c работает нормально, но, будучи новичком в Angular / Rx JS (front-end development), я не очень уверен, что мой код - хороший код. Пожалуйста, дайте мне знать наши мысли или поправьте меня. Буду признателен, если кто-нибудь подскажет мне лучший способ реализации моего метода onSelect ().

Answer 1

Я не совсем уверен в каких-либо улучшениях, которые можно было бы сделать в вашем html, чтобы еще больше упростить этот метод, поскольку вы его не показывали, но, откровенно говоря, я бы сделал следующее.

Решение # 1

Это решение не совместимо с Inte rnet Explorer из-за использования метода Array.prototype.findIndex (). См. Совместное решение № 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);
    }
}

Плюсы

• , совместимые с Inte rnet Explorer.

В целом, я Я бы посоветовал вам прочитать о сложности некоторых методов Array.prototype, чтобы вы могли лучше понять выбор, который вы делаете на этом пути, и попытаться лучше понять, что в частности, метод Array.prototype.map (). Я оставлю источники ниже.

Источники

• Сравнение производительности между сращиванием и фильтром (и copyWithin). ( ссылка )
• обсуждение сложности javascript методов массива. ( ссылка )

Array.prototype.map () со страниц документации MDN ( ссылка )

(.. .) map вызывает предоставленную функцию обратного вызова один раз для каждого элемента в массиве по порядку и создает новый массив из результатов . обратный вызов вызывается только для индексов массива, которым присвоены значения (включая неопределенные). (...)