パイプを使用してオブザーバブルからプロパティを抽出する方法

Question

OrderStateオブジェクトをngrxストアに格納しようとしています。私が持っている問題は、これから自分のUIにデータを抽出することです。私はちょうど非同期パイプを使用して、この観察可能なオブジェクトから子プロパティを取得します。

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のではありません。 AppStateと呼ばれるラッパータイプOrderStateです。ファインなので、ログdata.orderState.stageにコードを変更して、値1を取得します。しかし、私がこれを行うと、orderStateはデータのプロパティではなく、明らかにコンソールの出力を見ています！

Answer 1

{{orderState $}}すると、結果が非​​同期パイプ（オブジェクト）から文字列に変換されるため、[オブジェクトオブジェクト]が表示されます。あなたは、パイプだから、本質的に、あなたがこのパイプに非同期パイプから結果を渡し、戻ってきている

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

のように見えるこの

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

のような何かをしたいパイプである特性を引き出します特定のフィールド。ここでは、作業plunkr https://plnkr.co/edit/mnsf9s2zxEypDiDDUzrp?p=preview

---

は更新ある - パイプの代わりに、あなたはまた、観察シーケンスから返されるものを制限するrjxsマップメソッドを使用することができます。私は、その場合には、より複雑な変換関数が

ここ

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

する作業plunkr https://plnkr.co/edit/zbfuSBCLXwlMIhWCPf6z?p=previewあるcomponent.tsに含まれる必要があり、応答特性は、上記パイプのように簡単ではないかもしれないにアクセスするので、この方法を好みます

Answer 2

ngrxストアから間違った選択をしたように見えます。

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

これは、振り返ってみると明らかである

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

CORRECT WRONG。私が思っていたのは、あなたが望む場所にスライスすることでした。次のように参考のために私の店のオブジェクトは、次のとおりです。

app.state.ts

export interface AppState { 
    counter: number; 

    orderState : OrderState; 
} 

order.state.ts

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

OrderStateAppStateの "サブ" お店です。私の場合、まだappStateStoreを参照する必要がありますが、オブジェクトからorderStateを取り出すには、=>関数を使用します。