加载组件时未调用角度材料自动完成更改事件？

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)" >

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);
  }

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

Answer 2

好吧，首先，你ngOnInit根本没有使用。

其次，ngModelChange不适用于反应形式。

您必须像这样监听值的变化：

this.myGroup
    .get('identifier').valueChanges.subscribe(value => console.log('Value changes'));

这是通过反应形式聆听价值变化的标准方法。

这是您的StackBlitz。