如何使用管道從可觀察對象中提取屬性

我試圖在我的ngrx存儲中存儲OrderState對象。我有這個問題是從我的用戶界面提取數據。我只想使用異步管道從此可觀察對象獲取一個子屬性。如何使用管道從可觀察對象中提取屬性

order.state.ts

export interface OrderState { 
    stage: number; 
    postcode: string; 
}

app.component.ts

... 
export class AppComponent { 
    counter: Observable<number>; 
    readonly orderState$: Observable<OrderState>; 

    constructor(
     private appStateStore: Store<AppState>, 
     private counterActions: CounterActions, 

     private orderStateStore: Store<OrderState>, 
     private orderActions: OrderActions, 
    ) { 

    this.counter = appStateStore.select('counter'); 
    this.orderState$ = orderStateStore.select(store => store); 
    } 
...

app.component.html

<div>Stage: {{ (orderState$ | async)?.stage }}</div>

什t是從我的orderstate對象獲取stage屬性所需的語法。

如果我顯示{{ orderState$ }}我只是得到[Object object]顯示在頁面上。

我猜可能我沒有從我的商店中正確選擇？

更新：我必須在這裏丟失一些基本的東西。現在我已經做到了這一點，以嘗試和工作發生了什麼事......

app.component.ts

stage: number 

... 

    this.orderStateStore.select(s => s).subscribe((data:OrderState) => { 
     this.stage = data.stage; 
     console.log(this.stage); 
    });

app.component.html

<div>Stage: {{ stage }}</div>

我可以在控制檯中看到我的那個階段報告爲未定義。我相信這與問題有關。出於某種原因，我無法在此箭頭功能中設置我的組件的stage。

更新：此行爲似乎很奇怪...

order.state.ts

export interface OrderState { 
    stage: number; 
    postcode: string; 
}

app.component.ts

... 
this.orderStateStore.select(s => s).subscribe((data:OrderState) => {  
    console.log('--- START ---'); 
    console.log(data); 
    console.log('Stage: ' + data.stage); 
    console.log('--- END ---'); 
}); 
...

現在這是我得到的安慰樂...

正如你所看到的，data實際上不是OrderState類型。它是圍繞OrderState的包裝類型，稱爲AppState。很好，所以我修改我的代碼以記錄data.orderState.stage以獲得值1。然而，當我這樣做時，TypeScript抱怨orderState不是數據的屬性 - 它顯然正在查看控制檯輸出！

來源

2017-08-10 Remotec

'{{（orderState $ | async）.stage}}'<==這個語法應該工作得很好。 – Meeker

可悲的是沒有。不知道我做錯了什麼。 – Remotec

您應該用您的示例創建plnkr – Meeker

當你做{{orderState $}}時，它正在顯示[對象對象]，因爲它將你的結果從異步管道（一個對象）轉換爲一個字符串。要拉開一定的屬性與你想要做這樣的事情

{{orderState$ | async | asyncField : 'stage'}}

在管看起來像

@Pipe({name: 'asyncField'}) 
export class AsyncFieldPipe implements PipeTransform { 
    transform(object, key: string){ 
     return object[key]; 
    } 
}

所以基本上你是從異步管道傳遞結果這條管道和返回管道一個特定的領域。這是一個工作plunkr https://plnkr.co/edit/mnsf9s2zxEypDiDDUzrp?p=preview

更新 - 作爲一個管道的替代方法，您還可以使用rjxs映射方法來限制從觀察到的序列返回。我喜歡這種方法，因爲訪問應答性能可能不如上述管一樣容易，在這種情況下，更復雜的變換函數可能需要被包括在component.ts

this.orderState$ = orderStateStore.select(store => store).map(res => res.stage);

這裏是一個工作plunkr https://plnkr.co/edit/zbfuSBCLXwlMIhWCPf6z?p=preview

來源

2017-08-10 20:45:04 LLai

@RemotecUk這個管道的替代方法是將rjxs .map函數添加到可觀察序列.map（res => res.stage）的末尾，現在{{$ orderState}}將只是輸出舞臺屬性 – LLai

作爲管道的替代品，您能否在答案中提供這個例子？謝謝。 – Remotec

@RemotecUk我已更新我的回答 – LLai

看起來我錯了從ngrx商店中選擇的錯誤。

WRONG

this.orderState$ = orderStateStore.select(store => store);

正確

this.orderState$ = appStateStore.select(x => x.orderState);

這是在回顧明顯。我的想法是，你可以切入你想要的商店。僅供參考我的存儲對象如下：

app.state.ts

export interface AppState { 
    counter: number; 

    orderState : OrderState; 
}

order.state.ts

export interface OrderState { 
    stage: number; 
    postcode: string; 
}

OrderState是AppState一個「子」店。在我的情況下，我仍然需要參考appStateStore，但使用=>函數從對象中檢索orderState。

來源

2017-08-11 21:00:21 Remotec

如何使用管道從可觀察對象中提取屬性

回答

相關問題