角材料自动完成，自动选择列表中的不同项目

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