【问题标题】:Angular2: Subscription is not getting triggered [duplicate]Angular2:订阅没有被触发[重复]
【发布时间】:2018-02-11 19:31:00
【问题描述】:

我正在开发一个应用程序,我正在订阅服务的更改,但不知何故它没有检测到更改并且我没有获取最新数据,谁能告诉我我错过了哪里。

基本上它是一个购物车应用程序,我在其中使用产品填充购物车。

我订阅更改的组件..

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { CartService } from '../services/cart.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-cart-observer',
  templateUrl: './cart-observer.component.html',
  styleUrls: ['./cart-observer.component.css'],
  providers: [CartService]
})
export class CartObserverComponent implements OnInit {

  products: any[] = [];
  numProducts: number = 0;
  cartTotal: number = 0;
  changeDetectorRef: ChangeDetectorRef;

  constructor(private cartService: CartService, changeDetectorRef: ChangeDetectorRef) {
    this.changeDetectorRef = changeDetectorRef;
  }

  ngOnInit() {
    this.cartService.productAdded$$.subscribe(data => {
      console.log(data);
      this.products = data.products;
      this.cartTotal = data.cartTotal;
      console.log(this.products);
      this.changeDetectorRef.detectChanges();
    });
  }

  deleteProduct(product) {
    this.cartService.deleteProductFromCart(product);
  }}

购物车服务:我从中推送更改的组件

import { Injectable } from '@angular/core';
import { Product } from '../product-list/product';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CartService {
    products: any[] = []
    cartTotal: number = 0

    private productAddedSource = new Subject<any>()


    productAdded$$ = this.productAddedSource.asObservable();
    constructor() { }

    addProductToCart(product) {
        console.log(product);
        let exists = false;
        let parsedPrice = product.price;
        this.cartTotal += parsedPrice
        //Search this product on the cart and increment the quantity
        this.products = this.products.map(_product => {
            if (_product.product.id == product.id) {
                _product.quantity++
                exists = true
            }
            return _product
        })
        //Add a new product to the cart if it's a new product
        if (!exists) {
            product.parsedPrice = parsedPrice
            this.products.push({
                product: product,
                quantity: 1
            })
        }
        console.log(this.products);
        this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal });
    }

    deleteProductFromCart(product) {
        this.products = this.products.filter(_product => {
            if (_product.product.id == product.id) {
                this.cartTotal -= _product.product.parsedPrice * _product.quantity
                return false
            }
            return true
        })
        this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal })
    }


    flushCart() {
        this.products = []
        this.cartTotal = 0
        this.productAddedSource.next({ products: this.products, cartTotal: this.cartTotal })
    }

}

【问题讨论】:

  • 使用BehviourSubject而不是Subject
  • @Aravind 这有什么帮助?
  • 考虑到您正在使用组件“装饰器”的 providers 数组,很可能您正在创建该服务的多个实例
  • 正如@Jota.Toledo 指出的那样,这可能是错误的根源,在这里最好使用 appmodule 作为提供者
  • @AlokG 您还没有配置 ChangeDetection onPush 的另一件事是您手动执行此操作的任何原因,如果您未配置 changeDetection:onPush,则不建议执行此操作

标签: angular rxjs subscription angular2-observables


【解决方案1】:

感谢cmets的人,我删除后解决了

  providers: [CartService]

来自我订阅更改的组件。

【讨论】:

    猜你喜欢
    • 2016-08-06
    • 1970-01-01
    • 1970-01-01
    • 2022-01-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多