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

Question

我正在尝试在firebase中创建/更新购物车。 我正在使用具有将localStorage ID添加到firebase的功能的服务，如果产品已经存在，则添加购物车中的数量，否则创建新的数量。 控制台TypeError中发生错误：无法读取null的属性'quantity'，并且在shopping-cart service.ts中编译时也出错：

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

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

购物，cart.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});
    });
  }

产品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() {
  }

}

产品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>

product.ts：

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

Answer 1

错误是非常具有描述性的observable没有这样的属性。 因为valueChanges()函数返回一个observable，它只有数据。 但是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});
  });
}

Answer 2

经过大量的搜索和调试也是Yevgen的一部分回答我修改了我的代码以摆脱ERROR TypeError：无法读取属性'quantity'的null 。 如果我使用valueChanges则会在添加新购物valueChanges出错。 所以我改为snapshotChanges并把它存在的一些逻辑，现在工作正常。 如果有人仍然更新我的答案，那么非常欢迎。

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$.snapshotChanges().pipe(take(1)).subscribe((item:any) =>  {
    if (item.key != null) {
      item$.update( {quantity:( item.payload.val().quantity || 0) + 1}); 
    }
    else{
       item$.set( {product:product, quantity:1}); 
      }
  }); 
}