类型'Observable< {}>'上不存在属性'update'。 Firebase 5 AngularFire2 5 [英] Property 'update' does not exist on type 'Observable<{}>'. Firebase 5 AngularFire2 5

问题描述

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

I am trying to create/update shopping-cart in firebase. I am using a service that has functions that add the localStorage ID to firebase and It add's the quantity in shopping-cart if the product already exist otherwise it created new one. The error occurred in console TypeError: Cannot read property 'quantity' of null and I also got error on compilation in shopping-cart service.ts:

1. 属性'更新'在'Observable< {}>'类型中不存在。


2. 类型'{}'上不存在属性'数量'

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

The following image demonstrate what I'm trying to get in firebase:

shopping-cart.service.ts

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（文件的相关部分）

shoppng-cart.service.ts (relevant part of document)

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

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

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：

product.ts:

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

推荐答案

错误是非常具有描述性的可观察性没有这样的财产。因为 valueChanges（）函数返回一个observable，它只有数据。但 AngularFireObject 具有更新功能，您需要使用它。所以你需要修改你的代码，如：

Error is pretty descriptive observable has no such property. Its because valueChanges() function returns an observable and it has only data in it. But AngularFireObject has update function and you need to use it. So you need to modify your code like:

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

这篇关于类型'Observable&lt; {}&gt;'上不存在属性'update'。 Firebase 5 AngularFire2 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！