我正在尝试在我的ngrx商店中存储OrderState
对象。我遇到的问题是将数据从此提取到我的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>
从stage
对象获取orderstate
属性所需的语法是什么。
如果我显示{{ 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
的{{1}}周围的包装类型。很好,所以我修改我的代码以记录AppState
以获得值data.orderState.stage
。但是,当我这样做时,TypeScript会抱怨1
不是数据的属性 - 它显然是在查看控制台输出!
答案 0 :(得分:2)
当你执行{{orderState $}}时,它显示[Object object],因为它将结果从异步管道(对象)转换为字符串。要使用管道拉出某个属性,你想做类似这样的事情
{{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 map方法来限制从可观察序列返回的内容。我更喜欢这种方法,因为访问响应属性可能不像上面的管道那么容易,在这种情况下,组件中可能需要包含更复杂的转换函数。
this.orderState$ = orderStateStore.select(store => store).map(res => res.stage);
这是一个有效的plunkr https://plnkr.co/edit/zbfuSBCLXwlMIhWCPf6z?p=preview
答案 1 :(得分:0)
看起来我错了ngrx商店的错误选择。
<强> WRONG 强>
fib_stack1
<强> CORRECT 强>
fib_stack1
回想起来,这是显而易见的。我的想法是你可以切入你想要的商店。作为参考,我的商店对象如下:
<强> app.state.ts 强>
this.orderState$ = orderStateStore.select(store => store);
<强> order.state.ts 强>
this.orderState$ = appStateStore.select(x => x.orderState);
export interface AppState {
counter: number;
orderState : OrderState;
}
是export interface OrderState {
stage: number;
postcode: string;
}
的“子”商店。在我的情况下,我仍然需要参考OrderState
,但使用=&gt;函数从对象中检索AppState
。
答案 2 :(得分:0)
只需执行以下操作: {{((orderState $ | async).stage}}