I'm having trouble storing an OrderState object in my ngrx store and extracting data from it for my UI using the async pipe. Specifically, I want to retrieve a child property from this observable object.
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>
What is the syntax needed to access the stage property from my orderstate object?
When I display {{ orderState$ }}, I only see [Object object]. Am I not selecting from my store correctly?
Update: There seems to be a basic issue here. I tried this to understand what's happening...
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>
In the console, I can see that stage reports as undefined. This might be contributing to the problem. It seems like I cannot set the stage of my component inside this arrow function.
Update: The behavior is quite perplexing...
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 ---');
});
...
Here's what I observe in the console...
https://i.stack.imgur.com/jzxU6.png
It appears that data isn't actually of type OrderState. Instead, it is the wrapper type around OrderState called AppState. Although I attempt to log data.orderState.stage to obtain the value 1, TypeScript throws an error stating that orderState is not a property of data - even though it clearly is based on the console output!