Question

我有一个订阅包含购物车商品的CartService的组件。我想要做的是使用管道根据内容计算购物车总数＆amp;显示值。

如何迭代我的可观察数据来计算/返回总数？现在当我注销进入管道的值时，它只返回observable而不是数据。是什么给了什么？

//calculateTotal.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

import * as _ from "lodash";

@Pipe({name: 'calculateTotal'})
export class CalculateTotal implements PipeTransform {
  transform(items: string): any {

    _.each(items, function(item){
      console.log(item);
    })

    return items;

  }
}



// nav-cart.component.pug
{{items | calculateTotal}}




//nav-cart.component.ts
import { Component } from '@angular/core';


import { StoreItem } from '../../store.item.interface'
import { CartService } from '../../services/cart.service'


@Component({
  selector: 'nav-cart-component',
  styleUrls:['nav-cart.component.css'],
  templateUrl: 'nav-cart.component.pug',
  encapsulation: ViewEncapsulation.Native  // Use the native Shadow DOM to encapsulate our CSS

})
export class NavCartComponent {

  cartItems:StoreItem[] = [];

  items: StoreItem[] ;
  constructor(private cartService: CartService) {

    cartService.cartList$.subscribe(
      res => {
        this.items = res;
      })



  }

}

Answer 1

您的属性items不是可观察的。我不知道你的服务，它会返回一个数组，还是它的JSON？如果一切顺利，它应该有效。

cartService.cartList$.subscribe(
   res => {
      console.log(res); // CHECK THIS.. VALID ARRAY?
      this.items = res;
   });

改变你的烟斗..

transform(items: ItemStore[]): any {
   console.log(items); // ARRAY HERE?

您正在尝试订阅该observable并将该项目放入本地属性..

你可以直接使用那个observable！正如@cartant已经评论过，您应该使用async - 管道，然后使用calculateTotal - 管道。

// COMPONENT

items: Observable<StoreItem[]>;

constructor(private cartService: CartService) {
   this.items = cartService.cartList$
}

// TEMPLATE

{{items | async | calculateTotal}}

您可以根据需要链接尽可能多的管道。如果您愿意，可以使用大括号：

{{((items | async) | calculateTotal) | anyOtherPipe : 'with' : 'three' : 'paramteres'}}

如何在可观察数据上使用管道？

1 个答案: