RxJS中的combineLatest
操作符可以用于將多個Observable對象合并成一個新的Observable對象,新的Observable對象的值是由原始Observable對象的最新值組成的一個數組。當任何一個原始Observable對象發出新值時,新的Observable對象的值也會更新。
combineLatest
的使用方法如下:
combineLatest<T>(...obs: Array<Observable<T>>): Observable<Array<T>>
其中,...obs
表示可變參數,可以傳入多個Observable對象。返回值是一個新的Observable對象,值是由原始Observable對象的最新值組成的一個數組。
舉個例子,假設我們有兩個Observable對象obs1
和obs2
,它們分別表示輸入框A和輸入框B的輸入內容。我們想要實現一個功能,當輸入框A和輸入框B都有輸入內容時,才能點擊一個按鈕。這個功能可以通過combineLatest
實現,代碼如下:
import { combineLatest } from 'rxjs';// 輸入框A的Observable對象
const obs1 = document.getElementById('input-a').valueChanges();// 輸入框B的Observable對象
const obs2 = document.getElementById('input-b').valueChanges();// 當輸入框A和輸入框B都有輸入內容時,才能點擊按鈕
combineLatest(obs1, obs2).subscribe(([value1, value2]) => {const button = document.getElementById('button');button.disabled = !value1 || !value2;
});
在上面的代碼中,我們首先獲取了輸入框A和輸入框B的Observable對象obs1
和obs2
,然后使用combineLatest
將它們合并成一個新的Observable對象。當新的Observable對象發出新值時,我們通過解構賦值獲取輸入框A和輸入框B的最新值,然后根據這些值來判斷按鈕是否應該被禁用。
combineLatest([this.validateForm.controls.aa.valueChanges,this.validateForm.controls.bb.valueChanges,this.validateForm.controls.cc.valueChanges,this.validateForm.controls.dd.valueChanges,]).pipe(takeUntil(this.unsubscribe)).subscribe(([aa,bb,cc,dd,]) => {if (this.validateForm.controls.aa.errors ||this.validateForm.controls.bb.errors ||this.validateForm.controls.cc.errors ||this.validateForm.controls.dd.errors) {return;}if (!aa&&!bb&&!cc&&!dd) {return;}if (!aa||!bb||!cc||!dd) {return;}Sting test aa + bb + cc + dd; });