如何将Observable与mat-select的selectionChange事件关联

有三种常用方法可以实现选择变更时从文档中提取对应属性值：

方法一：模板传参直接处理 #

在模板调用事件函数时，把当前异步获取的文档一起传入：

<mat-select
    [formControl]="graphDatasetsFormControl"
    (selectionChange)="onGraphDatasetChange($event, asyncData.sd)"
    ngDefaultControl
>

然后在组件的事件处理函数中，通过属性名从文档中取值：

onGraphDatasetChange(e: MatSelectChange, document: any) {
    if (!document) return; // 避免文档未加载时出错
    const selectedProperty = e.value;
    const targetValue = document[selectedProperty]; // 用方括号访问动态属性
    console.log(targetValue);
    // 这里可以添加对目标值的业务处理逻辑
}

方法二：组件内缓存当前文档 #

在selectedDocument$的管道中把文档缓存到组件变量，后续直接使用：

private currentDocument: any;

selectedDocument$ = this.store.selectedDocument$.pipe(
    tap(document => {
        console.log(document);
        this.currentDocument = document; // 缓存当前文档
    })
);

事件处理函数中直接用缓存的文档取值：

onGraphDatasetChange(e: MatSelectChange) {
    if (!this.currentDocument) return;
    const selectedProperty = e.value;
    const targetValue = this.currentDocument[selectedProperty];
    console.log(targetValue);
}

方法三：响应式组合数据流（RxJS） #

利用RxJS的combineLatest组合文档流和表单控件的选择流，自动触发值提取：

import { combineLatest } from 'rxjs';
import { filter, map } from 'rxjs/operators';

ngOnInit() {
    combineLatest([
        this.selectedDocument$,
        this.graphDatasetsFormControl.valueChanges
    ]).pipe(
        filter(([doc, prop]) => !!doc && !!prop), // 过滤空值，避免错误
        map(([doc, prop]) => doc[prop]) // 提取对应属性值
    ).subscribe(targetValue => {
        console.log(targetValue);
        // 处理提取到的值，比如更新视图或发送请求
    });
}

这种方式更符合Angular的响应式编程理念，无需手动处理事件回调。

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker