Angular Material Autocomplete：如何阻止选择选项时触发valueChange

有两种实用方案可以解决这个问题，你可以根据Autocomplete选项的类型选择合适的方式：

方案一：通用标志位过滤法（适配所有选项类型） #

通过添加一个标志位标记当前是否是用户选择了Autocomplete选项，在valueChanges流中直接跳过这类事件：

模板代码 #

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected()">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option.label }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, filter, tap } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  myControl = new FormControl();
  options: any[] = [];
  private isOptionSelected = false;

  ngOnInit() {
    this.myControl.valueChanges
      .pipe(
        debounceTime(300),
        // 过滤掉选择选项触发的valueChange事件
        filter(() => !this.isOptionSelected),
        // 仅保留输入字符串且长度≥3的情况
        filter(value => typeof value === 'string' && value.length >= 3),
        tap(query => this.fetchSuggestions(query))
      )
      .subscribe();
  }

  onOptionSelected() {
    this.isOptionSelected = true;
    // 在下一个事件循环重置标志位，不影响后续用户输入
    setTimeout(() => {
      this.isOptionSelected = false;
    }, 0);
  }

  private fetchSuggestions(query: string) {
    // 替换为你的服务器请求逻辑
    // this.apiService.getSuggestions(query).subscribe(res => this.options = res);
  }
}

方案二：基于值类型过滤法（仅适用于选项为对象的场景） #

如果你的Autocomplete选项是对象（而非纯字符串），用户输入时formControl的值是字符串，选择选项后值会变成对象，直接通过判断值的类型就能过滤无用请求：

this.myControl.valueChanges
  .pipe(
    debounceTime(300),
    // 仅当值为字符串且长度≥3时发起请求
    filter(value => typeof value === 'string' && value.length >= 3),
    tap(query => this.fetchSuggestions(query))
  )
  .subscribe();

这种方法更简洁，但只适用于选项是对象的场景；如果选项本身就是字符串，建议使用方案一。

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