Angular自动完成组件响应性问题：新增选项后DOM未更新

嗨，我来帮你搞定这个问题！

你遇到的核心问题是：你的filteredOptions只在输入框的值变化时才会重新计算过滤结果。当你调用addOption往options数组里添加新元素时，输入框的值并没有改变，所以valueChanges这个Observable不会触发，新的选项也就不会被纳入过滤结果，自然DOM不会更新。

下面给你两种靠谱的解决方案，你可以根据场景选择：

方案一：用响应式数据流监听数组变化（推荐，Angular最佳实践） #

这种方式通过BehaviorSubject来包装options数组，让数组的变化也能成为数据流的一部分，和输入框的值变化合并后再计算过滤结果。

修改后的完整代码如下：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'autocomplete-filter-example',
  templateUrl: 'autocomplete-filter-example.html',
  styleUrls: ['autocomplete-filter-example.css'],
})
export class AutocompleteFilterExample implements OnInit {
  myControl = new FormControl();
  // 用BehaviorSubject包装options数组，初始值为原数组
  private optionsSubject = new BehaviorSubject<string[]>(['One', 'Two', 'Three']);
  // 对外暴露只读的Observable
  options$ = this.optionsSubject.asObservable();
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    // 合并输入框值变化和数组变化的数据流
    this.filteredOptions = combineLatest([
      this.myControl.valueChanges.pipe(startWith('')),
      this.options$
    ]).pipe(
      // 同时接收输入值和当前的options数组进行过滤
      map(([value, options]) => this._filter(value, options))
    );
  }

  private _filter(value: string, options: string[]): string[] {
    const filterValue = value.toLowerCase();
    return options.filter((option) =>
      option.toLowerCase().includes(filterValue)
    );
  }

  addOption() {
    // 获取当前数组的副本，添加新元素后发送给Subject
    const currentOptions = [...this.optionsSubject.value];
    currentOptions.push('Four');
    this.optionsSubject.next(currentOptions);
  }
}

这样每次你调用addOption时，optionsSubject会发出新的数组，combineLatest就会重新计算过滤结果，自动更新DOM。

方案二：手动触发输入框值变化（快速解决简单场景） #

如果你不想重构代码，也可以在添加新选项后，手动触发一次输入框的值变化，让valueChanges重新执行过滤逻辑：

addOption() {
  this.options.push('Four');
  // 手动设置当前值（和原有值一样），触发valueChanges
  this.myControl.setValue(this.myControl.value);
}

这种方式简单直接，但属于“hack”式的解决方法，适合快速验证或者简单场景，复杂场景下还是推荐方案一。

备注：内容来源于stack exchange，提问作者SGR