Angular Material 自动完成，自动选择列表中的不同项目

Question

我们有不同的、唯一的文档编号列表，其中没有文档编号在列表中显示两次。

我正在努力做到 Angular Material 自动选择不同的，如果它是通过复制和粘贴输入的。

目前，在使用 Ctrl-C/V 复制和粘贴后，我们使用了三个东西：OptionSelected 用于鼠标选择，OptionActivated 用于键盘选择，以及 OnBlur，因此当点击文本框外时，选项将被选择。

我很好奇 Angular Material 是否有任何更简洁的选项，或者这可能是三行代码的最佳方式吗？

<mat-form-field>
  <mat-label>Document Number</mat-label>
  <input type="text"
        matInput
        formControlName="documentNumber"
        (blur)="documentNumberChangeEvent($event)"
        [matAutocomplete]="auto"
  >
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" 
    (optionActivated) = "documentNumberChangeEvent($event)"
    (optionSelected)="documentNumberChangeEvent($event)"
  >

Answer 1

可能更好的方法是听 FormControl valueChanges 属性:

...
@Component(...)
export class AutocompleteSimpleExample {
  readonly documentNumber = new FormControl();
  readonly options: string[] = ['One', 'Two', 'Three'];

  constructor() {
    this.documentNumber.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

StackBlitz

Angular Material 自动完成，自动选择列表中的不同项目

Angular Material AutoComplete, Automatically choose the Distinct Item in List

angular

typescript

autocomplete

angular-material

angular8