“Observable<{}>”类型上不存在属性“update”。Firebase 5 AngularFire2 5

Question

我正在尝试在 firebase 中创建/更新购物车。我使用的服务具有将 localStorage ID 添加到 firebase 的功能，如果产品已经存在，它会添加购物车中的数量，否则它会创建新的。错误发生在控制台TypeError: Cannot read property 'quantity' of null并且我在购物车 service.ts 中编译时也遇到错误：

1. “Observable<{}>”类型上不存在属性“update”。
2. 类型“{}”上不存在属性“数量”

下图展示了我试图在 firebase 中获得的内容：

购物车.service.ts

import { take } from 'rxjs/operators';
import { AngularFireDatabase, snapshotChanges } from 'angularfire2/database';
import { Injectable } from '@angular/core';
import { Product } from './models/product';

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

  constructor(private db: AngularFireDatabase) { }

  private create(){
    console.log('shoping service')
   return this.db.list('/shopping-carts').push({
      dateCreated: new Date().getTime()
    });
  }

 private getCart(cartId: string){
   return this.db.object('/shoping-carts/'+ cartId);
 }

  private async getOrCreateCartId(){
    let cartId = localStorage.getItem('cartId');

    if(cartId) return cartId;

    let result = await this.create();
    localStorage.setItem('cartId', result.key);
    return result.key;

  }
  private getItem(cartId: string, productId: string){
    return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();
  }

  async addToCart(product: Product){
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.key);

    item$.pipe(take(1)).subscribe( item => {
       item$.update({ product: product, quantity: (item.quantity || 0) + 1});
    });
  }

shoppng-cart.service.ts（文档的相关部分）

private getItem(cartId: string, productId: string){
    return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();
  }

  async addToCart(product: Product){
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.key);


    item$.pipe(take(1)).subscribe( item => {
       item$.update({ product: product, quantity: (item.quantity || 0) + 1});
    });
  }

product-card.component.ts

import { ShoppingCartService } from './../shopping-cart.service';
import { Product } from './../models/product';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.css']
})
export class ProductCardComponent implements OnInit {

  @Input('product') product;
  @Input('show-actions') showActions = true;
  constructor(private cartService:ShoppingCartService) { }

  addToCart(product:Product){
   this.cartService.addToCart(product);
  }

  ngOnInit() {
  }

}

product-card.component.html

<div *ngIf="product.title" class="card m-auto">
    <img class="card-img-top" [src]="product.imageUrl" *ngIf="product.imageUrl" alt="{{ product.title }}">
    <div class="card-body pb-0">
      <h5 class="card-title">{{product.title}}</h5>
      <p>{{product.price | currency: 'USD'}}</p>
    </div>
    <div  class="card-footer p-0 border-top">
        <button *ngIf="showActions" (click)="addToCart(product)" class="btn btn-primary btn-block">Add to Cart</button>
    </div>
  </div>

产品.ts：

export interface Product{
    key:  string;
    title: string;
    price: number;
    category: string;
    imageUrl: string;   
}

Answer 1

错误是非常具有描述性的，可观察的没有这样的属性。这是因为valueChanges()函数返回一个可观察对象，并且其中只有数据。但AngularFireObject有更新功能，你需要使用它。所以你需要修改你的代码，例如：

private getItem(cartId: string, productId: string): {
  return this.db.object<any>('/shopping-carts/' + cartId + '/items/' + productId);
}

async addToCart(product: Product){
  let cartId = await this.getOrCreateCartId();
  let item$ = this.getItem(cartId, product.key);

  item$.valueChanges().pipe(take(1)).subscribe((item: any) => {
     item$.update({ product: product, quantity: (item.quantity || 0) + 1});
  });
}