Angular中Observable设初始值引发ExpressionChangedAfterItHasBeenCheckedError问题

这个错误的核心原因是你在ngAfterViewInit生命周期钩子中初始化了filterLocation$，而ngAfterViewInit是在Angular完成第一轮变更检测之后才会执行的。当你在这里给filterLocation$赋值并添加startWith(this.locations)时，模板已经完成了第一次渲染（此时filterLocation$ | async的值是null），之后你又更新了这个Observable的值，导致Angular检测到表达式在变更检测完成后发生了变化，从而抛出这个错误。

解决方案：将Observable初始化移到ngOnInit中 #

把filterLocation$的初始化逻辑从ngAfterViewInit移到ngOnInit里，因为ngOnInit是在Angular第一次变更检测之前执行的，这样初始值就能在模板第一次渲染时被正确获取到，不会触发表达式变更错误。同时，建议使用Angular的@ViewChild来获取搜索框元素，而不是原生的document.querySelector，这更符合Angular的组件化规范。

修改后的组件代码：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { fromEvent, Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  // 保留你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit {
  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
  locations = ['name1', 'name2']; // 你的初始位置列表
  filterLocation$!: Observable<string[]>;

  ngOnInit() {
    this.filterLocation$ = fromEvent(this.searchInput.nativeElement, 'input')
      .pipe(
        map((e: Event) => {
          const value = (e.target as HTMLInputElement).value;
          return value 
            ? this.locations.filter(l => l.toLowerCase().includes(value.toLowerCase()))
            : this.locations;
        }),
        startWith(this.locations)
      );
  }
}

对应的模板代码需要把搜索框的id改成模板引用变量：

<input #searchInput id="search-input" type="text" placeholder="搜索位置">
<ng-template ngFor let-location [ngForOf]="filterLocation$ | async"> 
  <a mat-list-item href="#">{{location}}</a> 
</ng-template>

为什么这样改能解决问题？ #

1. 生命周期时机匹配：ngOnInit在组件初始化后、第一次变更检测前执行，此时给filterLocation$赋值并设置startWith，模板在第一次渲染时就能拿到初始的locations数组，不会出现从null到数组的突然变更。
2. 符合Angular规范：使用@ViewChild获取DOM元素是Angular推荐的组件内DOM操作方式，避免了直接操作全局DOM，更适合组件化开发的场景。

如果因为特殊需求必须在ngAfterViewInit中处理逻辑，也可以手动触发一次变更检测作为临时解决方案，但这并非最优选择：

import { ChangeDetectorRef } from '@angular/core';

// 构造函数注入ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  const searchBox = document.querySelector('#search-input');
  this.filterLocation$ = fromEvent(searchBox, 'input')
    .pipe(
      map((e: any) => {
        const value = e.target.value;
        return value ? this.locations.filter(l => l.toLowerCase().includes(value.toLowerCase())) : this.locations;
      }),
      startWith(this.locations)
    );
  // 手动触发变更检测，让Angular同步最新值
  this.cdr.detectChanges();
}

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