RxJS Subject传递数组调用.next()未触发观察者通知的问题

嗨，这是RxJS结合引用类型数据的典型坑！你的问题核心出在distinctUntilChanged()的默认行为上，数组和字符串的处理逻辑确实不一样，我给你拆解清楚：

为什么会出现这种情况？ #

• 字符串是值类型，每次变化都会生成全新的字符串值，distinctUntilChanged()默认的浅比较能轻松检测到差异，所以订阅总能触发。
• 数组是引用类型，你现在的add和remove方法应该是直接修改原数组（比如用push、splice）——这时候数组的内存引用地址根本没变！而distinctUntilChanged()默认只比较对象的引用，它会觉得“前后两次传的是同一个数组”，自然不会给订阅者发通知。
• 你提到的“空→1个、1个→空”能触发，大概率是这两种场景下数组的引用意外变了（比如初始是空数组[]，第一次添加时不小心创建了新数组，或者清空时换成了新的空数组），但后续增删元素时只是改原数组，引用没动，所以订阅就没反应了。

两种搞定它的方法 #

方法1：让distinctUntilChanged学会比较数组内容

如果你不想改数组的更新逻辑，可以给distinctUntilChanged传个自定义比较函数，让它别光看引用，得检查数组里的内容：

this.categoriesChangeSubscription = this.filterService.categories
  .pipe( 
    debounceTime(500), 
    distinctUntilChanged((prev, curr) => {
      // 先比长度，不一样直接返回false（内容肯定变了）
      if (prev.length !== curr.length) return false;
      // 再逐个比对每个分类的关键属性
      return prev.every((cat, idx) => 
        cat.Name === curr[idx].Name && cat.isChecked === curr[idx].isChecked
      );
    }) 
  )
  .subscribe((categories: Array<ICategory>) => {
    this.categories = categories.map(category => category.Name);
    this.loadData();
  });

这个方法不用改你的add/remove逻辑，但如果数组很大，逐个比对会有性能开销，适合小体量的分类列表。

方法2：每次更新都创建新数组（更推荐，符合Angular/RxJS最佳实践）

RxJS和Angular都更偏爱不可变数据模式——说白了就是别改原数组，每次更新都返回一个新数组。修改你的add和remove方法：

private add(category: ICategory): void {
  // 用扩展运算符复制原数组并添加新元素，生成新数组
  this.chosenCategories = [...this.chosenCategories, category];
}

private remove(category: ICategory): void {
  // 用filter过滤掉要移除的元素，返回新数组
  this.chosenCategories = this.chosenCategories.filter(c => c !== category);
}

这样每次调用next()时传的都是全新的数组引用，distinctUntilChanged()默认的引用比较就能立刻检测到变化，订阅自然就正常触发了。这种方式不仅解决了当前问题，还能避免后续可能出现的变更检测问题，是更推荐的做法。

额外提一句 #

你在模板里用[(ngModel)]="category.isChecked"直接修改了category对象的属性，这也是修改引用类型的内容。如果后续你需要监听单个分类的选中状态变化，同样要记得遵循不可变原则（比如复制category对象再修改属性），不过当前问题的核心还是数组引用的问题，先搞定这个就好啦。

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