加载组件时未调用 Angular Material 自动完成更改事件？

Question

我使用了 angular material("@angular/material": "7.1.0") 自动完成组件，然后我使用了表单控件而不是 ng 模型，现在的问题是，当我无法获得自动完成更改事件时组件正在加载。我在 ngOnInint 方法上将值设置为自动完成组件，当时我想根据自动完成值的变化调用一个方法。

我在 stackblitz 创建了一个代码，这里是链接:https://stackblitz.com/edit/angular-xmnmpy

Answer 1

您必须使用 optionSelected事件在 <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChange($event)" >
Example on StackBlitz

您必须在 html 中使用:

<form [formGroup]="myGroup">
<mat-form-field>
    <input type="text"
          matInput
          [matAutocomplete]="auto"
          formControlName="identifier">
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChange($event)" >
      <mat-option *ngFor="let animal of animals"
            [value]="animal.name">
        {{animal.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

在你的 ts 中:

  onSelectionChange(event){
    console.log('onSelectionChange called', event.option.value);
  }

希望我对你有帮助，如果你需要帮助，请随时问我!