表单提交时Service订阅被触发两次：先返回Null后返回真实数据

嘿，我在Angular开发里碰到过好多次这种订阅两次的情况，结合你的代码场景，大概率是Observable特性或者组件触发逻辑的问题，给你几个实用的排查和解决思路：

1. 先过滤掉无效的Null数据 #

从你描述的“第一次返回Null，第二次返回实际数据”来看，你的fireService.getBook返回的很可能是BehaviorSubject这类带初始值的Observable——它们会在订阅时先发送初始的Null值，之后再发送实际加载完成的数据。

这种情况最简单的解决方式是用RxJS的filter操作符把Null过滤掉，只处理有效数据：

this.errorMessage = null;
this.fireService.getBook(this.bookDetails.isbn)
  .pipe(filter(data => data !== null)) // 筛掉Null值，只处理有效数据
  .subscribe(data => {
    console.log('subscribe called');
    this.dbox.open(DialogBoxComponent, {
      data: {
        title: 'Error',
        content: 'Book is already present in Library. Select Edit book to modify the details',
        button: '...' // 补全你的按钮配置
      }
    });
  });

2. 排查是否触发了两次addBook方法 #

有时候订阅两次不是Observable的问题，而是你的addBook方法被调用了两次！常见的原因有：

• 表单同时绑定了(ngSubmit)和按钮的(click)事件，导致提交时触发两次方法
• 组件变化检测策略导致方法重复执行（比如默认的Default策略下，某些变更会触发方法重跑）

你可以先在addBook方法开头加个console.log('addBook called')，看看是不是真的触发了两次。如果是，就把重复的事件绑定去掉，或者给组件设置ChangeDetectionStrategy.OnPush优化变化检测。

3. 用take(1)确保订阅只执行一次（还能防内存泄漏） #

不管是哪种原因，对于这种“查询一次就够”的场景，强烈建议用RxJS的take(1)操作符，它会在获取到第一个数据后自动取消订阅，既避免重复执行逻辑，还能防止内存泄漏：

this.errorMessage = null;
this.fireService.getBook(this.bookDetails.isbn)
  .pipe(
    filter(data => data !== null),
    take(1) // 只取一次有效数据就结束订阅
  )
  .subscribe(data => {
    console.log('subscribe called');
    this.dbox.open(DialogBoxComponent, {
      data: {
        title: 'Error',
        content: 'Book is already present in Library. Select Edit book to modify the details',
        button: '...'
      }
    });
  });

4. 检查Firebase服务的实现 #

如果你的getBook是基于Firebase实时数据库的valueChanges()，那它默认是持续监听数据变化的——第一次返回当前的初始状态（可能是Null），当数据加载完成后返回实际值。如果你只需要单次查询，应该改成用get()方法，或者在服务里就加上take(1)：

// 在fireService里修改getBook方法
getBook(isbn: string) {
  return this.db.collection('books').doc(isbn).valueChanges().pipe(take(1));
}

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