Angular中点击按钮更新Firebase RTDB路径时ngOnChanges未触发问题

核心问题：ngOnChanges未触发的原因 #

ngOnChanges 钩子仅在组件的输入属性（被@Input()装饰器标记的变量）发生变化时才会触发。你定义的x是组件内部的私有变量，并非输入属性，所以点击按钮修改x的值不会触发该钩子。

另外，你仅在构造函数中初始化了一次items数据源，后续x变化时没有重新订阅Firebase的数据库路径，因此页面不会更新数据。

解决方案一：直接在点击方法中更新数据源 #

修改race_no方法，在更新x后直接重新获取Firebase数据并赋值给items：

race_no(b: string){
  this.x = b;
  // 重新订阅新路径的数据源
  this.items = this.db.list(this.x).valueChanges();
}

页面中的async管道会自动检测到items Observable的变化，重新订阅并渲染新数据。

解决方案二：用BehaviorSubject管理数据源（RxJS推荐方式） #

如果需要更灵活的数据源切换（比如后续有更多路径切换需求），可以用BehaviorSubject配合switchMap操作符来管理：

1. 定义Subject保存当前路径：

import { BehaviorSubject } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// ...其他代码
private pathSubject = new BehaviorSubject<string>("race_no_1");
items: Observable<any[]>;

constructor(private db: AngularFireDatabase) {
  // 通过switchMap自动切换数据源
  this.items = this.pathSubject.pipe(
    switchMap(path => this.db.list(path).valueChanges())
  );
}

2. 修改点击方法更新Subject的值：

race_no(b: string){
  this.pathSubject.next(b);
}

这种方式无需手动重复赋值items，RxJS会自动处理订阅的切换，还能避免潜在的内存泄漏问题。

关于HTTP场景的说明 #

你之前用HTTP.Get时逻辑生效，大概率是因为当时的变量是输入属性，或者在修改变量后手动调用了更新数据的方法，符合Angular的生命周期触发规则，而本次Firebase场景的变量是内部变量，不满足ngOnChanges的触发条件。

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