Question

在输入中键入一些文本并通过按回车键从自动完成功能中选择一个选项时，两个字符串都保存为筹码。 Image here

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

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

有人遇到过这个问题吗？

Answer 1

关于选择事件，当您按ENTER键时，输入中的 matChipInputTokenEnd 和 mat-autocomplete 中的 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);
}

Answer 2

对我来说很好。在这里，我附加了meterial.angular.io

提供的示例链接

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

Answer 3

当您有严格的选择选择时，AndréDias提出的解决方案可以工作，但是如果您需要在选择中添加一个子字符串（如果您只在其中包含“ 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 4

我结合了@ama和this other answer的答案，以获得我认为您正在描述的功能。关键是结合使用optionActivated全局变量和手动关闭自动完成面板：

将optionActivated添加到您的mat-autocomplete

<input #autoInput (matChipInputTokenEnd)="inputTokenEnd($event)" ... >
<mat-autocomplete (optionActivated)="optionActivated($event)"
                  (optionSelected)="optionSelected($event)... >

添加optionActivated函数和全局变量

autocompleteTagsOptionActivated = false;

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

为输入的MatAutocompleteTrigger添加访问器

@ViewChild('autoInput', { read: MatAutocompleteTrigger }) matAutocompleteTrigger: MatAutocompleteTrigger;

更改您的inputTokenEnd仅在未激活标签的情况下处理输入，并有条件地关闭自动完成功能

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

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

    // Reset the input value
    if (input) {
      input.value = '';
    }
    this.controlsForm.autocomplete.setValue(null);

    // If no autocomplete options were activated, then issue the command to close the panel.  The enter key that
    // triggers the input will inadventantly open the panel
    if (!this.autocompleteTagsOptionActivated) {
      this.matAutocompleteTrigger.closePanel()
    } 
  }

更改您的optionSelected以重置激活变量


  optionSelected(event: MatAutocompleteSelectedEvent): void {
    this.autocompleteTagsOptionActivated = false;

    ...
  }

Answer 5

当我在导入模块时更改顺序时，它对我有用。在 a = 12345 print(getDigit(a,3)) 之前导入 MatAutocompleteModule。

Answer 6

我得到了相同的行为，解决方案只是将 [matAutocomplete] 放在 [matChipInputFor] 之前

Angular Material，Mat Chips自动完成错误，在optionSelected之前执行matChipInputTokenEnd

6 个答案: