如何向Angular Material Select绑定的Observable添加自定义选项？

问题原因 #

你的代码未生效主要有三个核心问题：

• tap 操作符仅用于执行副作用逻辑（如调试、打印），不会修改Observable发出的数据流内容，模板依然接收原始的categories数据。
• 你没有将pipe处理后的Observable重新赋值给categories变量，导致模板使用的还是未添加test的原始数据源。
• 直接用unshift修改原数组属于副作用操作，可能影响其他订阅该数据源的组件，不符合RxJS的数据流规范。

正确实现方式 #

方法一：初始化数据源时直接添加默认选项 #

在构造函数中获取数据源后，用map操作符创建包含test的新数组，替换原始Observable：

export class MyComponent {
  categories: Observable<ICategory[]>;
  test = initialCategory;
  selectForm: FormControl = new FormControl(); 
    
  constructor(private dbService: DbConnector) { 
    // 使用map转换数据流，将test添加到数组开头
    this.categories = this.dbService.readCollection("categories").pipe(
      map(list => [this.test, ...list])
    );
  }
}

方法二：在ngOnInit中处理（适用于test需要延迟初始化的场景） #

如果test需要在组件初始化后才能获取值，可在ngOnInit中重新处理Observable：

export class MyComponent {
  categories: Observable<ICategory[]>;
  test: ICategory;
  selectForm: FormControl = new FormControl(); 
    
  constructor(private dbService: DbConnector) { 
    this.categories = this.dbService.readCollection("categories");
  }

  ngOnInit(){
    this.test = initialCategory;
    // 重新赋值categories，添加默认选项
    this.categories = this.categories.pipe(
      map(list => [this.test, ...list])
    );
  }
}

模板简化 #

去掉单独的mat-option，直接遍历处理后的Observable：

<mat-select [formControl]="selectForm">
  <mat-option *ngFor="let item of categories | async" [value]="item">{{item.displayName}}</mat-option>
</mat-select>

关键说明 #

• 使用map操作符可以安全转换数据流，返回新的数组（而非修改原数组），避免副作用影响其他订阅者。
• 必须将处理后的Observable重新赋值给categories，才能让模板的async管道接收到包含默认选项的数据。

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