Angular中RxJS BehaviourSubject无法正常过滤项目问题求助

使用BehaviourSubject绑定下拉选择框实现项目过滤，但切换下拉选项后页面始终显示所有项目，无过滤效果。

相关代码 #

组件TS代码 #

private selectedCustomerSubject = new BehaviorSubject<number>(0);
  
selectedCustomerAction$ = this.selectedCustomerSubject.asObservable();  
    
getFilteredProjects(): Observable<project[]> {
    return combineLatest([this.projects$, this.selectedCustomerAction$ ]).pipe(
      map(([projects, selectedCustomerId]) => {
        return selectedCustomerId 
          ? projects.filter(project => project.id === selectedCustomerId) 
          : projects;
      })
    );
  }
projectWithFilter$ = this.getFilteredProjects();

组件HTML代码 #

<div class="container">
  <h2>Customer Projects filter dropdown</h2>

  <!-- Customer Dropdown -->
  <mat-form-field appearance="fill" class="customer-dropdown">
    <mat-label>Select Customer</mat-label>
    <mat-select (selectionChange)="onCustomerChange($event.value)">
      <mat-option *ngFor="let customer of customers$ | async as customers" [value]="customer.id">
        {{ customer.first_name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

<h2>Projects filter Information </h2>
<div *ngIf="projectWithFilter$ | async as custprojects">
<mat-list>
<mat-list-item *ngFor="let custproject of custprojects ">
  {{ custproject.id }}
  {{ custproject.projectName }}
  {{ custproject.first_name }}
</mat-list-item>
</mat-list>
</div>

问题排查与解决方案 #

1. 缺失onCustomerChange方法实现 #

下拉选择框的(selectionChange)事件绑定了onCustomerChange，但代码中未实现该方法，导致选中值无法传递给BehaviourSubject，数据流不会更新。需补充：

onCustomerChange(customerId: number): void {
  this.selectedCustomerSubject.next(customerId);
}

2. 过滤条件字段不匹配 #

当前过滤逻辑用project.id === selectedCustomerId，但下拉选择的是客户ID，项目对象中关联客户的字段应该是类似customerId的字段，而非项目自身的id。修正过滤逻辑：

map(([projects, selectedCustomerId]) => {
  return selectedCustomerId 
    ? projects.filter(project => project.customerId === selectedCustomerId) // 替换为项目中存储客户ID的字段
    : projects;
})

3. 额外验证点 #

• 确认projects$是持续更新的Observable（比如来自HTTP请求或BehaviorSubject），而非一次性静态数据。
• 检查customers$的异步管道是否正确加载客户列表，确保customer.id为有效数值类型（避免字符串与数字不匹配）。

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