使用異步管

單ngIf組合兩個或多個（布爾）觀測沒有觀測我可以寫在HTML模板下面一行：使用異步管

<div *ngIf="(myVarA || myVarB) && myVarC !== x"></div>

如果所有myVar變量是現在實際上是如何翻譯這行觀測？

<div *ngIf="((myVarA | async) || (myVarB | async)) && (myVarC | async) !== x">

不起作用。

在另一個問題（Putting two async subscriptions in one Angular *ngIf statement）的可能性將兩個或多個觀測值合併成一個ngIf可以像

<div *ngIf="{ a: myVarA | async, b: myVarB | async } as result"></div>

實現然而，我沒有看到，能使用任何布爾運算符（或任何運營商那麼重要），然後用於評估ngIf。

我該如何解決這個問題？請注意，我的所有Observable都在下面使用BehaviorSubject。我想基本上我想要的是在模板中使用combineLatest運算符。

獎勵：如果整個表達式的計算結果爲true，以便以後在模板中使用（如myVarA | async as varA），是否有任何方法可以提取myVarA的單個值？

來源

2017-09-07 Sebastian

是否有可能創建一個新的可觀察結合兩者？另一種方法是使用一個以undefined開頭的對象變量，或者爲null，並且在observables發送下一個值後，您可以將對象變量設置爲某個值。 – John

observables用於在您的情況下獲取數值流，變量一次只能有一個值。你要麼訂閱觀察數組，然後使用異步只有數組不可觀察 –

@John我正在使用ChangeDetectionStrategy.onPush的被動方法，所以我不能在代碼中使用一個對象，然後在模板中進行更新。使用combineLatest結合observables是我的想法，但我真的想避免在代碼 – Sebastian

如何使用combineLatest？

例如：

import { combineLatest } from 'rxjs/observable/combineLatest'; 
import { Observable } from 'rxjs/Observable';  

@Component({...}) 
export class FooComponent { 
    obs1$: Observable<bolean>; 
    obs2$: Observable<bolean>; 
    obs3$: Observable<bolean>; 

    constructor(){ 
    // set observables 
    } 

    get combined$(){ 
    return combineLatest(
     this.obs1$, 
     this.obs2$ 
     this.obs3$, 
     (one,two,three)=>(one || two) && three); 
    } 
} 

// template 
<div *ngIf="combined$ | async">

檢查以下搗鼓指導：

https://jsfiddle.net/uehasmb6/11/

有關combineLatest運營商更多信息here

UPDATE：但是，如果你仍想保留模板內部的所有邏輯，你可以嘗試這樣的：

<div *ngIf="((myVarA | async) || (myVarB | async)) && ((myVarC | async) !== x)">

但我會建議你對此。保持HTML模板儘可能清潔是good practice。

來源

2017-09-07 19:02:48

謝謝。我也發現了這一點。因此，只有在模板之外有一些很酷的語法時，才能真正做到這一點？ – Sebastian

更新了我的答案，我已經在一些項目中製作了這樣的東西，並且工作正常 –

有趣。所以我確實只是缺少一組括號......但我同意新的顯式管道更清潔。 – Sebastian

Jota.Toledo的答案非常好，但是我想跟進我的'獎金'問題，即如何在ngIf之後訪問表達式的一部分。

基本上，我所做的就是將兩個或更多的可觀測量組合成Jota.Toledo描述的類。然而，一個observable不是布爾值，但包含ngIf後需要可用的項目。

那麼很容易，只是做到以下幾點：

newObs = combineLatest(
    this.itemObs, 
    this.boolObs1 
    this.boolObs3, 
    (item, bool1, bool2) => ((item || bool1) && bool2) ? item : null 
);

，因爲我們可以依靠在ngIf非空對象的truthyness。 ngIf然後只是看起來像

<div *ngIf="newObs | async as item"></div>

這當然不會工作，如果ngIf後需要多個項目。在這種情況下，你將不得不在嵌套div部分使用兩個ngIfs。

來源

2017-09-08 12:21:36 Sebastian

回答

相關問題