Angular 5中BehaviorSubject数据已传递但UI（*ngFor）未更新问题

这种明明数据已经拿到手，但*ngFor对应的UI就是纹丝不动的情况，我太懂那种挠头的感觉了！结合你用的Angular 5.2.0和RxJS 5.5.6的环境，我给你梳理几个最可能的原因和对应的解决办法：

1. 先确认BehaviorSubject的核心用法是否正确 #

很多人踩坑都是在这里：直接修改BehaviorSubject里的数组（比如push/splice），而不是用next()推送全新的数组引用。Angular的变更检测依赖引用变化，原数组引用没变的话，*ngFor根本不会触发更新。

正确的Service写法应该是这样：

// Home.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class HomeService {
  // 必须初始化默认值（比如空数组），否则订阅会收不到初始值
  private dataSubject = new BehaviorSubject<any[]>([]);
  // 对外暴露只读的Observable，避免外部直接修改Subject
  public data$ = this.dataSubject.asObservable();

  updateData(newData: any[]) {
    // 用扩展运算符创建新数组，确保引用变化
    this.dataSubject.next([...newData]);
  }

  // 假设你的后端请求方法
  fetchDataFromServer(searchKeyword: string) {
    // 这里用HttpClient请求后端（Angular 5的HttpClient已经自动处理NgZone）
    this.http.get(`/api/search?keyword=${searchKeyword}`)
      .subscribe(res => {
        this.updateData(res.data);
      });
  }
}

2. 检查组件的订阅是否规范，有没有意外取消订阅 #

在Angular 5里，订阅Observable后如果没做好清理，可能会导致内存泄漏，甚至意外断开订阅。推荐用takeUntil操作符管理订阅，而且尽量把订阅放在ngOnInit（比构造函数更规范的组件初始化时机）：

// Home.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { HomeService } from './home.service';
import { Subject } from 'rxjs/Subject';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  template: `
    <div *ngFor="let item of dataList">{{ item.name }}</div>
  `
})
export class HomeComponent implements OnInit, OnDestroy {
  dataList: any[] = [];
  // 用于在组件销毁时取消所有订阅的Subject
  private destroy$ = new Subject<void>();

  constructor(private homeService: HomeService) {}

  ngOnInit() {
    this.homeService.data$
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        // 先打日志确认是否真的收到新数据
        console.log('收到新数据:', data);
        this.dataList = data;
      });
  }

  ngOnDestroy() {
    // 组件销毁时触发取消订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

3. 变更检测策略导致的问题（如果用了OnPush） #

如果你的HomeComponent设置了ChangeDetectionStrategy.OnPush，Angular只会在输入属性变化或组件内部触发变更检测时更新UI。这种情况下有两种解决办法：

方案A：手动触发变更检测 #

// Home.component.ts
import { ChangeDetectorRef } from '@angular/core';

constructor(
  private homeService: HomeService,
  private cdr: ChangeDetectorRef
) {}

// 在订阅回调里添加手动触发
.subscribe(data => {
  this.dataList = data;
  this.cdr.detectChanges(); // 强制Angular检测变更并更新UI
});

方案B：用async管道自动处理（更推荐） #

直接在模板里用async管道，Angular会自动管理订阅和变更检测，还不用手动写订阅代码：

<!-- Home.component.html -->
<div *ngFor="let item of homeService.data$ | async">{{ item.name }}</div>

4. 确认Service是单例，避免多实例导致数据传递失败 #

如果你的HomeService没有被正确注册为单例，LayoutTopComponent和HomeComponent拿到的会是不同的Service实例，数据自然传不过去。Angular 5里要确保Service在根模块的providers里注册：

// app.module.ts
import { HomeService } from './home.service';

@NgModule({
  providers: [HomeService] // 在这里注册，确保整个应用只有一个实例
})
export class AppModule {}

注意：不要在组件的providers数组里注册这个Service，否则每个组件都会创建新实例。

5. 排查数据是否在Angular变更检测上下文之外推送 #

如果你用了非Angular的异步API（比如原生fetch、第三方请求库），或者在Web Worker里推送数据，那数据推送会在Angular的变更检测上下文之外，导致UI不更新。这种情况下要用NgZone把推送逻辑包裹起来：

// Home.service.ts
import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

fetchDataFromServer(searchKeyword: string) {
  // 假设用原生fetch请求
  fetch(`/api/search?keyword=${searchKeyword}`)
    .then(res => res.json())
    .then(data => {
      this.ngZone.run(() => {
        this.updateData(data);
      });
    });
}

不过如果你用的是Angular官方的HttpClient，它已经自动在NgZone里处理了，这个问题大概率不会出现。

最后给你个排查顺序：

1. 先确认Service是单例
2. 检查BehaviorSubject是否用next()推送新数组引用
3. 在订阅里打日志，确认是否真的收到数据
4. 如果用了OnPush策略，要么手动触发变更检测，要么用async管道
5. 确认数据推送在Angular的NgZone上下文里

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