Angular 12在定义BehaviorSubject时出错

Question

Errors I Get:

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)的初始值。

如果你不想要一个初始值，只需使用一个常规的Subject。

你也可以这样定义BehaviorSubject:

new BehaviorSubject<IBasket | null>

…但是我不明白为什么你要在代码的任何地方强制使用'null'。

你可以把BehaviorSubject看作是通过'startsWith'管道的Subject:

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