of().subscribe()订阅立即关闭，MatTable下拉选项无法刷新

问题原因 #

你用of(this.tableDataSource.data)创建的Observable只会一次性发射当前的data数组，然后立即完成，所以订阅只会触发初始赋值，后续数据变化时不会有任何响应，这就是你看到订阅状态closed: true的原因。

解决方案 #

要实现数据变化时自动更新下拉选项，你需要用BehaviorSubject来追踪数据的变化，它能在数据更新时持续发射最新值。结合RxJS的操作符和Angular的async管道，就能自动同步下拉选项和表格数据。

修改后的TS代码

import { BehaviorSubject, Observable, map } from 'rxjs';
import { MatTableDataSource } from '@angular/material/table';

// ...

tableDataSource: MatTableDataSource<randomInterface> = new MatTableDataSource<randomInterface>();
// 用BehaviorSubject追踪数据变化，初始值为空数组
private dataSubject = new BehaviorSubject<randomInterface[]>([]);
// 派生Observable，用于生成唯一选项
dropdownMultipleUniqueOptions$: Observable<string[]>;

ngOnInit() {
  // 从数据中提取唯一的param3值
  this.dropdownMultipleUniqueOptions$ = this.dataSubject.pipe(
    map(data => {
      // 使用Set快速去重，再转回数组
      return [...new Set(data.map(item => item.param3))];
    })
  );

  // 数据变化时同步更新表格数据源
  this.dataSubject.subscribe(data => {
    this.tableDataSource.data = data;
  });
}

// 外部获取新数据时调用这个方法，更新数据源
refreshTableData(newData: randomInterface[]) {
  this.dataSubject.next(newData);
}

ngOnDestroy() {
  // 组件销毁时清理Subject，避免内存泄漏
  this.dataSubject.complete();
}

修改后的HTML代码

把原来的数组替换成带async管道的Observable，Angular会自动处理订阅和更新：

<mat-select class="filterMultiselect"
            formControlName="filterParam3"
            multiple
            panelClass="filterMultiselect"
            placeholder="Filter"
            (selectionChange)="updateManualPage(1)">
  <mat-option *ngFor="let option of dropdownMultipleUniqueOptions$ | async"
              [value]="option">
    {{option}}
  </mat-option>
</mat-select>

补充说明 #

• 如果param3可能为null或undefined，可以在映射后加过滤逻辑：

  map(data => [...new Set(data.map(item => item.param3).filter(val => val != null))])
  

• 不要直接给tableDataSource.data赋值，而是调用refreshTableData方法，这样才能触发BehaviorSubject发射新值，同步更新下拉选项。
• async管道会自动管理订阅的生命周期，无需手动调用unsubscribe，但组件销毁时完成Subject是良好的内存管理习惯。

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