Angular中数组Observable未更新问题咨询

TypeScript代码： #

selectedLangs : string[]  = []
selectedLangs$: Observable<string[]> = of(this.selectedLangs);

ngOnInit(){
    this.form.get( 'languages' ).valueChanges
        .pipe(
            takeUntil( this._unSubscribeAll ),
            tap( langs => {
                this.selectedLangs = [];
                if( langs ) {
                    langs.forEach( ( lang: IOption ) => {
                        if( this.selectedLangs.find( f => f === lang ) === undefined ) {
                            this.selectedLangs.push( lang )
                        }
                    } )
                }
            } )
        )
        .subscribe();
} 

HTML代码： #

<small>{{(selectedLangs$ | async)}}</small>

答案：不会同步更新

原因如下：

• selectedLangs$是通过of(this.selectedLangs)创建的Observable，它只会一次性发射初始的数组引用，之后无论数组内部元素如何变化，这个Observable都不会再发射新值。of操作符的特性就是同步传入参数后立即完成，不会监听后续的引用对象内部变化。
• 虽然你在tap操作中修改了selectedLangs数组的内容，但数组属于引用类型，selectedLangs$持有的还是最初的数组引用。Angular的async管道只有在Observable发射新值时才会触发视图更新，数组内部元素的变更不会让Observable发射新值，因此视图不会同步更新。

修复方案 #

推荐使用BehaviorSubject来替代普通Observable，它能持续发射最新值：

// 替换原有的selectedLangs和selectedLangs$定义
selectedLangs$: BehaviorSubject<string[]> = new BehaviorSubject([]);

ngOnInit(){
    this.form.get( 'languages' ).valueChanges
        .pipe(
            takeUntil( this._unSubscribeAll ),
            tap( langs => {
                const newSelectedLangs: string[] = [];
                if( langs ) {
                    // 简化判断逻辑，用includes替代find
                    langs.forEach( ( lang: IOption ) => {
                        if( !newSelectedLangs.includes(lang) ) {
                            newSelectedLangs.push( lang )
                        }
                    } )
                }
                // 发射新的数组值，触发视图更新
                this.selectedLangs$.next(newSelectedLangs);
            } )
        )
        .subscribe();
}

HTML代码无需修改，async管道会自动订阅BehaviorSubject并在值更新时同步视图。

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