Angular Material、Mat Chips Autocomplete Bug、matChipInputTokenEnd 在 optionSelected 之前执行

Question

当在输入中输入一些文本并通过按回车键从自动完成中选择一个选项时，它会将两个字符串都保存为筹码。图片在这里

但是，使用鼠标从自动完成功能中选择选项时不会发生这种情况。

在Angular Material Autocomplete Chips提供的示例中，在描述的情况下，optionSelected 首先触发，而在我本地机器上的相同代码中，它在 matChipInputTokenEnd 之后执行，从而导致错误。

有没有人遇到过这个问题？

Answer 1

当我在导入模块时更改顺序时，它对我有用。MatAutocompleteModule之前导入MatChipsModule。

Answer 2

关于评选活动，当你按ENTER键，无论是matChipInputTokenEnd，从你的输入，以及optionSelected，从垫自动完成，将闪光。通常情况下，这首先发生在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);
}