Угловой материал, ошибка автозаполнения Mat Chips, matChipInputTokenEnd выполняется перед optionSelected

Question

При вводе некоторого текста во входные данные и выборе параметра из автозаполнения нажатием клавиши ввода он сохраняет в виде фишек обе строки. Изображение здесь

Однако этого не происходит при выборе параметра из автозаполнения с помощью мыши.

В примере, представленном для Микросхемы автозаполнения углового материала, в описанном случае сначала запускается optionSelected, а в том же коде на моей локальной машине он выполняется после matChipInputTokenEnd, что приводит к ошибке.

Кто-нибудь сталкивался с этой проблемой?

Answer 1

Работает нормально для меня.Здесь я прилагаю пример ссылки, предоставленной meterial.angular.io

https://stackblitz.com/angular/klblpljogjd?file=app%2Fchips-autocomplete-example.ts

Answer 2

Относительно события выбора, когда вы нажимаете ENTER, сработает как matChipInputTokenEnd , из вашего ввода, так и optionSelected , из mat-autocomplete , Обычно , это происходит с опцией optionSelected , так что при возникновении события ввода микросхема будет уже добавлена, и у входа не будет значения для добавления.По этой причине вы не получите эту проблему, щелкнув мышью, так как будет запущено только событие optionSelected .

Теперь я сказал обычно , потому чтоЯ также получаю эту проблему на компоненте, импортированном модулем.Если это ваш случай, возможно, это ошибка.

Однако я нашел быстрое решение.Что я сделал, так это проверил, было ли открыто диалоговое окно mat-autocomplete и не позволил mat-chip-input добавить новый элемент.Проверка выбранного элемента в списке параметров также возможна, но она менее производительна и не соответствует требуемому поведению.

Надеюсь, это поможет:

@ViewChild('chipAutocomplete') chipAutocomplete: MatAutocomplete;

addElement(event: MatChipInputEvent) {
  if ((event.value || '').trim() && !this.chipAutocomplete.isOpen) {
    this.value.push({
      name: event.value.trim()
    });
  }

  if (event.input) {
    event.input.value = '';
  }

  this.chipInputControl.setValue(null);
}