BehaviorSubject 未返回角度的最新值

Question

我正在使用angular（最新版本）建立一个网站，但我的问题是来自RxJS 的BehaviorSubject 不起作用

service.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export class ServicesService  {     
    constructor() { 
        this.getCartList() 
    }   productObj  
    private productObj = new BehaviorSubject({'total':0,'products':[]})  

    get getTheNo(){
        return localStorage.getItem('cartNo') ? parseInt(localStorage.getItem('cartNo')) : 0
    }
    get getCartItemCount() {
        return this.cartItemCount;
    }   
    get getCartItemPop() {
        return this.productObj;
    }           
    getCartList(){
        .......
        ......
        this.productObj.value.products.push({'id':cookarfg[0],'name':cookarfg[2],'amount':cookarfg[2],'price':cookarfg[3],'pics':cookarfg[4]})
        this.productObj.value.total=cookarfg[3]
        this.productObj.next(this.productObj.value);
    }       
}

这里是 header.components.ts 的代码

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ServicesService } from '../../services/services.service'

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
    productObj: BehaviorSubject<any>;
    constructor(
        private service: ServicesService,
        ) { }

    ngOnInit() { 
        this.productObj = this.service.getCartItemPop;
        console.log('console-> ',this.service.getCartItemPop)
    }
}

我想要的是，每当页面加载时，它将productObj 更新为最新值而不是{'total':0,'products':[]}，但它不起作用。我尝试了所有方法，但仍然无法正常工作，我需要您的帮助，我还是 angular 的新手，谢谢

Answer 1

我发现您的程序中存在一些错误并在下面进行修复。

import {BehaviorSubject} from 'rxjs';

export class ServicesService {
  constructor() {
    this.getCartList();
  }

  cartItemCount;
  productObj = new BehaviorSubject({'total': 0, 'products': []});

  get getTheNo() {
    return localStorage.getItem('cartNo') ? parseInt(localStorage.getItem('cartNo'), 0) : 0;
  }

  get getCartItemCount() {
    return this.cartItemCount;
  }

  get getCartItemPop() {
    return this.productObj;
  }

  getCartList() {

    // As productObj is a BehaviorSubject and not an arror or ordinary object, you cannot push value directly
    /*this.productObj.value.products.push({
      'id': cookarfg[0],
      'name': cookarfg[2],
      'amount': cookarfg[2],
      'price': cookarfg[3],
      'pics': cookarfg[4]
    });
    this.productObj.value.total = cookarfg[3];*/
    this.productObj.next({value: 'push the value here' }); // productObj is BehaviorSubject, you need to subscribe it to get its value
  }
}

然后您的标头组件将订阅 BehavourSubject 并从中提取值，如下所示

import { Component, OnInit } from '@angular/core';
import { ServicesService } from '../../services/services.service'

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  productObj: any;
  constructor(
    private service: ServicesService,
  ) { }

  ngOnInit() {
    this.service.productObj.subscribe((value => {
      console.log('console-> ', value);
      this.productObj = value;
    }));

  }
}

您直接更改了 BehaviorSubject 的值，这可能是问题所在。而productObj就是BehaviorSubject，需要订阅才能获得它的价值。