Angular 12 在定义 BehaviorSubject 时出错 [重复]

Question

我得到的错误：

Argument of type 'null' is not assignable to parameter of type 'IBasket'.
Argument of type 'null' is not assignable to parameter of type 'IBasketTotal'.

服务代码：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { Basket, IBasket, IBasketItem, IBasketTotal } from '../share/models/basket';
import { Product } from '../share/models/product';

@Injectable({
  providedIn: 'root'
})
export class BasketService {

  baseUrl = environment.apiUrl;
  private basketSource = new BehaviorSubject<IBasket>(null);
  basket$ = this.basketSource.asObservable();

  private basketTotalSource = new BehaviorSubject<IBasketTotal>(null);
  basketTotal$ = this.basketTotalSource.asObservable();

  constructor(private http: HttpClient) {

  }

  getBasket(id: string) {
    var x = this.http.get<IBasket>(this.baseUrl + "basket?basketId=" + id)
      .pipe(
        map(
          (basket: IBasket) => this.basketSource.next(basket)
        )
      )
    this.getCalculateBasket();
    return x;
  }

  setBasket(basket: IBasket) {
    return this.http.post<IBasket>(this.baseUrl + "basket", basket).subscribe(
      (response: IBasket) => {
        this.basketSource.next(response);
        this.getCalculateBasket();
      },
      error => {
        console.log(error);
      }
    );
  }

  getCurrentBasketValue() {
    return this.basketSource.value;
  }

  getCalculateBasket() {
    try {
      const basket: IBasket = this.getCurrentBasketValue();
      const shipping = 0;
      const subTotal = basket.items.reduce((a, b) => (b.price * b.qty) + a, 0);
      const total = shipping + subTotal;
      this.basketTotalSource.next({ shipping, subTotal, total });
    } catch (error) {
      console.log(error);
    }
  }

  incrementItemQty(item: IBasketItem) {
    const basket: IBasket = this.getCurrentBasketValue();
    const foundIndex = basket.items.findIndex(x => x.id === item.id);
    basket.items[foundIndex].qty++;
    this.setBasket(basket);
  }

  decrementItemQty(item: IBasketItem) {
    const basket: IBasket = this.getCurrentBasketValue();
    const foundIndex = basket.items.findIndex(x => x.id === item.id);
    if (basket.items[foundIndex].qty > 1) {
      basket.items[foundIndex].qty--;
      this.setBasket(basket);
    }
    else {
      this.removeItemFromBasket(item);
    }
  }

  removeItemFromBasket(item: IBasketItem) {
    const basket: IBasket = this.getCurrentBasketValue();
    if (basket.items.some(x => x.id === item.id)) {
      basket.items = basket.items.filter(x => x.id !== item.id);
      if (basket.items.length > 0) {
        this.setBasket(basket);
      }
      else {
        this.deleteBasket(basket);
      }
    }
  }

  deleteBasket(basket: IBasket) {
    return this.http.delete(this.baseUrl + "basket?basketId=" + basket.id).subscribe(() => {
      this.basketSource.next(null);
      this.basketTotalSource.next(null);
      localStorage.removeItem("basket_id");
    }, error => {
      console.log(error);
    });
  }

  addItemBasket(item: Product, qty: number = 1) {
    const itemToAdd: IBasketItem = this.mapProductItemToBasketItem(item, qty);
    const basket: IBasket = this.getCurrentBasketValue() ?? this.createBasket();
    basket.items = this.addOrUpdateItem(basket.items, itemToAdd, qty);
    this.setBasket(basket);
  }
  private addOrUpdateItem(items: IBasketItem[], itemToAdd: IBasketItem, qty: number): IBasketItem[] {
    console.log(itemToAdd);
    const index = items.findIndex(i => i.id === itemToAdd.id);
    if (index === -1) {
      itemToAdd.qty = qty;
      items.push(itemToAdd);
    }
    else {
      items[index].qty += qty;
    }
    return items;
  }

  private createBasket(): IBasket {
    const basket = new Basket();
    localStorage.setItem("basket_id", basket.id);
    return basket;
  }

  private mapProductItemToBasketItem(item: Product, qty: number): IBasketItem {
    return {
      id: item.id,
      name: item.name,
      price: item.price,
      qty: qty,
      pictureUrl: item.pictureUrl,
      brand: item.productBrand,
      type: item.productType
    };
  }
}

产生错误的代码：

private basketSource = new BehaviorSubject<IBasket>(null);
private basketTotalSource = new BehaviorSubject<IBasketTotal>(null);

Answer 1

BehaviorSubject 需要给定类型（IBasket / IBasketTotal）的初始值。

如果您不想要初始值，只需使用常规主题即可。

您也可以像这样定义 BehaviorSubject：

new BehaviorSubject<IBasket | null>

...但我不明白您为什么要在代码中的任何位置强制使用“null”。

您可以认为 BehaviorSubject 与通过“startsWith”管道传输的主题相同：

subject.pipe(startWith("Your initial object goes here"))