如何使用管道

时间:2017-08-10 20:27:24

标签: angular typescript ngrx

我正在尝试在我的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 ---');
});
...

现在这是我在控制台中得到的......

enter image description here

如您所见,data实际上不是OrderState类型。它是名为OrderState的{​​{1}}周围的包装类型。很好,所以我修改我的代码以记录AppState以获得值data.orderState.stage。但是,当我这样做时,TypeScript会抱怨1不是数据的属性 - 它显然是在查看控制台输出!

3 个答案:

答案 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}}