angular - Angular Material AutoComplete，自动选择 List 中的 Distinct Item

Question

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

我正在尝试使其自动成为 Angular Material，如果使用 Copy 和 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)"
  >

标签： angulartypescriptautocompleteangular-materialangular8

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