Angular2：訂閱沒有被觸發

我正在一個應用程序，我訂閱服務的變化，但不知何故它沒有檢測到變化，我沒有得到最近的數據，任何人都可以告訴我我失蹤的地方。Angular2：訂閱沒有被觸發

基本上它是一個購物車應用程序，我正在用產品傀儡購物車。

組件在那裏我訂閱的變化..

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 }) 
    } 

}

來源

2017-09-03 Alok G.

使用'BehviourSubject'而不是'Subject' – Aravind

@Aravind如何幫助？ – jonrsharpe

考慮到您使用的是組件「裝飾器」的提供者數組，很可能您正在創建該服務的多個實例 –

感謝鄉親的意見，其時我刪除解決成分

providers: [CartService]

來自我訂閱更改的組件。

來源

2017-09-03 11:10:36

Angular2：訂閱沒有被觸發

回答

相關問題