Свойство update не существует для типа Observable <{}>.Firebase 5 AngularFire2 5

Question

Я пытаюсь создать / обновить корзину в Firebase.Я использую сервис, который имеет функции, которые добавляют идентификатор localStorage к базе данных Firebase, и он добавляет количество в корзину, если продукт уже существует, в противном случае он создал новый.Произошла ошибка в консоли Ошибка типа: не удалось прочитать свойство 'количество', равное нулю , и я также получил сообщение об ошибке при компиляции в service cart.ts:

1. Свойство "обновление" делаетне существует в типе 'Observable <{}>'.
2. Свойство 'количество' не существует в типе '{}'

На следующем рисунке показано, что я пытаюсьполучить в пожарной базе:

shopping-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});
    });
  }

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>

product.ts:

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

Answer 1

После долгих поисков и отладки также часть ответа Yevgen Я изменил свой код, чтобы избавиться от ОШИБКА TypeError: Невозможно прочитать свойство 'amount' из null .Если я использую 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}); 
      }
  }); 
}

Answer 2

Ошибка довольно описательная, наблюдаемая не имеет такого свойства.Это потому, что функция 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});
  });
}