Angular Material AutoComplete，自动选择 List 中的 Distinct Item答案

【问题标题】：Angular Material AutoComplete, Automatically choose the Distinct Item in ListAngular Material AutoComplete，自动选择 List 中的 Distinct Item
【发布时间】：2020-05-05 05:34:35
【问题描述】：

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

我正在尝试使其自动成为 Angular Material，如果使用 Copy and Paste 输入，则选择不同的。

目前，在使用 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)"
  >

【问题讨论】：

标签： angular typescript autocomplete angular-material angular8

【解决方案1】：

可能更好的方法是监听FormControlvalueChanges属性：

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

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

StackBlitz

【讨论】：