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

Question

当在输入中键入一些文本并通过按enter从自动完成中选择一个选项时，它会将这两个字符串保存为芯片。Image here

但是，当用鼠标从自动完成中选择一个选项时，就不会发生这种情况。

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

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

Answer 1

关于选择事件，当您按ENTER时，来自输入的matChipInputTokenEnd和来自mat-autocomplete，的optionSelected都将触发。通常，这首先发生在optionSelected上，因此当输入事件触发时，芯片已经被添加，并且输入将没有要添加的值。这就是为什么您不能通过单击鼠标获得此问题的原因，因为只有optionSelected事件会被激发。

现在我说正常，因为我在一个模块导入的组件上也遇到了这个问题。如果这是您的情况，这可能是一个bug。

然而，我确实找到了一个快速的解决方案。我所做的是检查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);
}

​

Answer 2

虽然AndréDias提出的解决方案在你有一个严格的选择时有效，但如果你需要在选择中添加1的子字符串，它就不会起作用(当你的autocomplete中只有"javascript“时，想想"java”)。为了同样有效，你可以使用带有全局变量的optionActivated事件(这并不能完全解决问题，如果你用鼠标选择，你仍然会有这个问题)。下面是一个例子。html部分：

        <mat-autocomplete
          #auto="matAutocomplete"
          (optionActivated)="optionActivated($event)"
          (optionSelected)="selectedTag($event)">
          <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
            {{ tag }}
          </mat-option>
        </mat-autocomplete>

组件部分：

  autocompleteTagsOptionActivated = false;

  optionActivated($event: MatAutocompleteActivatedEvent) {
    if ($event.option) {
      this.autocompleteTagsOptionActivated = true;
    }
  }

然后检查布尔变量并将其设置为false，当实际从键盘选择添加时：

  addTag(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    if ((value || '').trim()  && !this.autocompleteTagsOptionActivated) {
      this.formArrayTags.push(this.formBuilder.control(value.trim().toLowerCase()));
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }

    this.tagsControl.setValue(null);
    this.formArrayTags.markAsDirty();
  }

  selectedTag(event: MatAutocompleteSelectedEvent): void {
    this.formArrayTags.push(this.formBuilder.control(event.option.viewValue));
    this.tagInput.nativeElement.value = '';
    this.tagsControl.setValue(null);
    this.autocompleteTagsOptionActivated = false;
  }

Answer 3

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