Angular Material自动完成组件值变化时onProductChange事件未触发

你的onProductChange事件未触发的核心原因是：

• 你将(change)事件绑定在<mat-autocomplete>组件上，但这个事件仅在用户选中下拉选项且输入框失去焦点时才会触发，不符合你“输入框值变化即触发”的需求；
• 若要监听输入框值变化（含手动输入、选中下拉选项），或仅监听下拉选项选中动作，需要调整事件绑定方式。

解决方案1：仅监听下拉选项选中动作 #

将<mat-autocomplete>上的(change)事件替换为(optionSelected)，该事件会在用户点击选中下拉选项时立即触发：

修改后的HTML代码 #

<input
  formControlName="productname"
  [id]="'productname_' + i"
  [name]="'productname_' + i"
  matInput
  #input
  type="text"
  [matAutocomplete]="auto"
  class="form-control"
  (click)="clicked(input)"
  (input)="performFiltering(input)"
  (opened)="performFiltering(input)"
/>
<mat-autocomplete
  #auto="matAutocomplete"
  (optionSelected)="onProductChange($event, i)"
>
  <mat-option
    *ngFor="let product of filteroptions | async"
    [value]="product"
  >
    {{product}}
  </mat-option>
</mat-autocomplete>

此时onProductChange中的event.option.value可以正常获取选中的选项值，无需修改TS代码。

解决方案2：监听输入框所有值变化（手动输入+选中选项） #

如果需要在用户手动输入文本、选中下拉选项时都触发onProductChange，可以采取以下两种方式：

方式A：复用输入框的(input)事件 #

修改输入框的(input)事件，同时调用过滤函数和onProductChange，并调整onProductChange兼容手动输入的参数：

HTML修改

<input
  ...
  (input)="performFiltering(input); onProductChange({ target: { value: input.value } }, i)"
  ...
/>
<mat-autocomplete
  #auto="matAutocomplete"
  (optionSelected)="onProductChange($event, i)"
>
  ...
</mat-autocomplete>

TS修改onProductChange函数

onProductChange(event: any, index: number) {
  // 兼容选中选项和手动输入两种场景
  const selectedValue = event?.option?.value ?? event?.target?.value;
  console.log(selectedValue);
}

方式B：利用FormControl的valueChanges监听（更推荐） #

在组件的ngOnInit（或初始化表单的逻辑中），监听对应FormControl的valueChanges，这种方式更符合Angular响应式表单的设计：

TS代码修改

// 假设你的表单组名为formGroup，若为FormArray则需遍历每个控件
ngOnInit() {
  // 注意：如果是在循环中（比如FormArray），需要确保index的正确性，可通过闭包或遍历绑定
  const control = this.formGroup.get('productname_' + i) as FormControl;
  control.valueChanges.subscribe(value => {
    this.onProductChange({ option: { value } }, i);
    // 若需要同时触发过滤，也可以把performFiltering的逻辑移到这里
  });
}

onProductChange(event: any, index: number) {
  const selectedValue = event?.option?.value;
  console.log(selectedValue);
}

内容的提问来源于stack exchange，提问作者Reegan