Angular 5问题：使用async pipe无法更新模板

嘿，我太懂你这种“第一次输入没反应，第二次才更新”的抓狂感了！结合你说的场景，我帮你拆解下问题根源，再给你靠谱的解决方案：

先搞懂为啥会出现“第二次才生效” #

你说的组件手动订阅后，模板要第二次keyup才更新，大概率是这俩原因之一：

1. 订阅时机踩坑了：如果每次keyup都新建Observable再订阅，万一第一次请求的结果在你订阅前就已经返回了（比如服务端响应超快，或者你用了同步模拟的数据源），那第一次的结果就“溜走”了，第二次订阅时才接住上一次的结果，导致视图延迟更新。
2. 变更检测没触发：要是你的Observable是在Angular的变更检测上下文之外更新数据（比如手动创建Observable时没走Zone.js），Angular根本不知道要更新视图，第二次keyup时碰巧触发了变更检测，才把之前的结果渲染出来。

给你两种修复方案，按需选 #

方案1：把手动订阅的逻辑改对 #

先看看你可能踩坑的错误写法（是不是类似这样？）：

// 组件里的错误示范
results: any[];

onKeyUp(event: KeyboardEvent) {
  const keyword = (event.target as HTMLInputElement).value;
  // 每次keyup都重新创建Observable+订阅，这就很容易出问题
  this.searchService.search(keyword).subscribe(data => {
    this.results = data;
  });
}

调整后的正确写法：

// 组件里的正确写法
results: any[];
// 用Subject做中间层，统一管理搜索关键词流
private searchSubject = new Subject<string>();

ngOnInit() {
  // 提前在组件初始化时就订阅，不要每次keyup才订阅！
  this.searchSubject.pipe(
    debounceTime(300), // 输入停300ms再发请求，避免频繁调用API
    distinctUntilChanged(), // 关键词没变化就不重复请求
    switchMap(keyword => this.searchService.search(keyword)) // 自动取消旧请求，只保留最新的
  ).subscribe(data => {
    this.results = data;
    // 要是还是不更新，就手动触发变更检测（注入ChangeDetectorRef）
    // this.cdr.detectChanges();
  });
}

onKeyUp(event: KeyboardEvent) {
  const keyword = (event.target as HTMLInputElement).value;
  // 只需要把关键词推给Subject就行
  this.searchSubject.next(keyword);
}

核心就是提前订阅，用Subject把分散的keyup事件整合成一个数据流，再用RxJS的操作符处理防抖、去重、取消旧请求这些细节，既解决了延迟问题，又提升了用户体验。

方案2：直接用Async Pipe（更推荐！） #

其实你提到的Async Pipe才是Angular里处理Observable的最优解，它会自动帮你订阅/取消订阅，还会自动触发变更检测，完全避免手动订阅的各种坑。

示例代码走一波：

// 组件代码
// 直接声明一个Observable类型的变量，不用手动存结果
searchResults$: Observable<any[]>;
private searchSubject = new Subject<string>();

ngOnInit() {
  this.searchResults$ = this.searchSubject.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(keyword => this.searchService.search(keyword))
  );
}

onKeyUp(event: KeyboardEvent) {
  const keyword = (event.target as HTMLInputElement).value;
  this.searchSubject.next(keyword);
}

<!-- 模板代码 -->
<input (keyup)="onKeyUp($event)" placeholder="输入关键词搜索...">
<!-- 用async pipe自动订阅，数据更新直接渲染 -->
<ul *ngIf="searchResults$ | async as results">
  <li *ngFor="let item of results">{{item.title}}</li>
</ul>

用了Async Pipe后，你根本不用管订阅的生命周期，也不用担心变更检测的问题，Observable一有新数据，视图立刻更新，完美解决你说的延迟问题。

再复盘下你的方案a为啥会坑 #

说白了就是每次keyup都重新创建Observable并订阅，第一次的结果可能在订阅前就已经发出了，Angular的变更检测周期刚好错过了，所以视图没更新；第二次keyup时，第一次的订阅结果才触发了变更检测，导致视图“滞后”更新。用Subject提前订阅或者直接上Async Pipe，都能把这个坑填上～

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