Angular 4切换按钮及操作数据表时出现ObjectUnsubscribedError问题求助

你在切换按钮点击、通过*ngIf控制数据表显示隐藏时碰到的这个ObjectUnsubscribedError，本质是代码尝试使用一个已经被取消订阅的Observable流。结合你的场景，大概率是这两种情况导致的：

• 当*ngIf="list_v"变为false时，数据表所在DOM元素被销毁，关联的订阅没有正确清理，之后再次显示（list_v变回true）时，代码仍在调用这个已失效的订阅。
• view_click方法里的操作依赖了某个已经被取消订阅的Observable。

接下来给你具体的解决步骤：

1. 定位问题订阅 #

先看错误栈里的ng:///AppModule/UserComponent.ngfactory.js:43:5，找到对应的UserComponent代码行，查看这行附近的Observable订阅（比如HTTP请求、RxJS流、组件间的EventEmitter订阅等），这就是需要处理的目标。

2. 正确管理订阅 #

方案一：用AsyncPipe自动管理 #

如果你的数据表绑定到Observable数据源，直接用Angular的AsyncPipe，它会自动帮你处理订阅和取消订阅，无需手动操作：

• 组件类中定义Observable类型的数据源：

  data$: Observable<YourDataType[]>;
  
  ngOnInit() {
    this.data$ = this.yourDataService.fetchData();
  }
  

• 模板中使用AsyncPipe：

  <div class="container-fluid" *ngIf="list_v; ">
    <div class="row">
      <div *ngFor="let item of data$ | async">
        <!-- 数据表内容 -->
      </div>
    </div>
  </div>
  

当*ngIf销毁元素时，AsyncPipe会自动取消订阅；再次显示时重新订阅，不会触发报错。

方案二：手动在ngOnDestroy里取消订阅 #

如果是你手动调用了.subscribe()，一定要在组件销毁时取消订阅：

• 先导入Subscription：

  import { Subscription } from 'rxjs';
  

• 组件类中保存订阅实例：

  private dataSub: Subscription;
  
  ngOnInit() {
    this.dataSub = this.yourDataService.fetchData().subscribe(data => {
      // 处理数据到list或其他变量
    });
  }
  
  ngOnDestroy() {
    // 组件销毁时取消订阅
    if (this.dataSub) {
      this.dataSub.unsubscribe();
    }
  }
  

如果有多个订阅，可以合并到一个Subscription中统一管理：

private subs = new Subscription();

ngOnInit() {
  this.subs.add(this.dataService.fetchData().subscribe(...));
  this.subs.add(this.viewClickSubject.subscribe(...)); // 若view_click使用了Subject
}

ngOnDestroy() {
  this.subs.unsubscribe();
}

3. 针对*ngIf的额外注意点 #

如果你的数据表是独立组件，要确保子组件内部的所有订阅都在它自己的ngOnDestroy钩子中清理——因为当*ngIf隐藏时，子组件会被销毁，内部未处理的订阅会在组件再次创建时引发错误。

4. 检查view_click方法 #

确认view_click里有没有操作已被取消订阅的流，比如如果这个方法复用了某个之前创建的Observable，而该Observable已被取消订阅，那就改成每次点击时重新创建订阅，或者确保订阅不会被提前取消。

内容的提问来源于stack exchange，提问作者Varun Gopal K.P