Angular2:订阅没有被触发
Angular2: Subscription is not getting triggered
我正在开发一个应用程序,我在其中订阅服务的更改,但不知何故它没有检测到更改并且我没有获得最新数据,任何人都可以告诉我我错过了什么。
基本上它是一个购物车应用程序,我在其中将产品放入购物车。
我订阅的组件发生了变化..
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 })
}
}
感谢大家的评论,我删除后问题已解决
providers: [CartService]
从我订阅更改的组件。
我正在开发一个应用程序,我在其中订阅服务的更改,但不知何故它没有检测到更改并且我没有获得最新数据,任何人都可以告诉我我错过了什么。
基本上它是一个购物车应用程序,我在其中将产品放入购物车。
我订阅的组件发生了变化..
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 })
}
}
感谢大家的评论,我删除后问题已解决
providers: [CartService]
从我订阅更改的组件。