Question

我试图遵循有关Angular + Firebase的教程，但该教程的版本为angular4，我的角度版本为6，同时我的Firebase和AngularFire2的版本也高于该教程，这是当前的最新版本。< / p>

我收到此错误

这是我的源代码

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

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

  constructor(private db: AngularFireDatabase) { }

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

  private getCart(cartId: string) {
    return this.db.object('/shopping-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;
  }

  async addToCart(product: Product) {
    let cartId = await this.getOrCreateCartId();
    let item$ = this.db.object('/shopping-carts/' + cartId + '/items' + product.key).valueChanges();
    item$.take(1).subscribe(item => {
      if (item.$exists()) {
        item$.update({ quantity: item.quantity + 1});
      } else {
        item$.set({ product: product, quantity: 1});
      }
    });

  }
}

Answer 1

在rxjs 6中，方法与<body onload='init();'> <div> <canvas id='style' height='400' width='400'> Your browser does not support canvas... </canvas> </div> </body>运算符链接在一起。您需要像这样使用pipe运算符：

pipe()

Answer 2

我一直遇到同样的问题，并且找到了解决方法。

您不能在订阅方法中调用set方法，因为item $类型是可观察的。因此我创建了另一个类型为AngularFireObject <{}>的对象item $$，可以在subscription方法中使用它并更新/设置产品。

对于。$ exists（）方法，我认为它不再存在，因此我检查item的值是否为null，而不是检查它是否存在。.

这是我的addToCart（p）函数代码：

async addToCart(product) {
  let cartId = await this.getOrCreateCartId();
  let item$: Observable<any> = this.db.object('/shopping-carts/' + cartId + '/items/' + product.key).valueChanges();
  let item$$ = this.db.object('/shopping-carts/' + cartId + '/items/' + product.key);
  item$.take(1).subscribe( item => {
     if( item === null ) {
        item$$.set({product: product, quantity: 1});
        console.log('adding new product to cart');
    }else{
        item$$.update({quantity: item.quantity + 1});
        console.log('updating exisiting product ');
   }
});

希望这会有所帮助

Answer 3

async addToCart(product) {

  let cartId = await this.getOrCreateCartId();

  let item$: Observable<any> = this.db.object('/shopping-carts/' + cartId +'/items/' + product.key).valueChanges();

  let item$$ = this.db.object('/shopping-carts/' + cartId + '/items/' + product.key);

  item$.take(1).subscribe( item => {
    if( item === null ) {
      item$$.set({product: product, quantity: 1});
      console.log('adding new product to cart');
    }else{
      item$$.update({quantity: item.quantity + 1});
      console.log('updating exisiting product ');``
    }
  });

Answer 4

这是我重写代码的方式：

async addToCart(product: Product) {
    const cartId = await this.getOrCreateCartId();
    const item$ = this.db.object('/shopping-carts/' + cartId + '/items/' + product.id);

    item$.valueChanges()
    .take(1)
    .subscribe(item => {
      if (item) {
        item$.update({quantity: item['quantity'] + 1});
      } else {
        item$.set({ product, quantity: 1 });
      }
    });
  }

类型“ Observable <{}>”上不存在属性“获取，更新，设置”

4 个答案: