“Observable<{}>”类型上不存在“take、update、set”属性

Question

我试图学习关于 Angular + Firebase 的教程，但教程的版本是 angular4，我的 angular 版本也是 6，我的 Firebase 和 AngularFire2 的版本也高于教程，这是目前的最新版本。

我收到这个错误

这是我的源代码

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 中，方法与pipe操作符链接在一起。 您需要像这样使用pipe()运算符：

async addToCart(product: any) {
    const cartId = await this.getOrCreateCartId();
    const item$ = this.db.object('/shopping-carts/' + cartId + '/items' + product.key).valueChanges();
    item$.pipe(take(1)).subscribe(item => {
        ...
    });
}

Answer 2

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

Answer 4

我一直被困在同样的问题中，我找到了解决方法。

您不能在 subscribe 方法中调用 set methode，因为 item$ it 是 observable 类型。 所以我创建了一个 AngularFireObject<{}> 类型的其他对象 item$$，我可以在 subscribe 方法中使用它并更新/设置产品。

对于 .$exists() 方法，我认为它不再存在，所以我检查了 item 的值是否为空，而不是检查它是否存在。

这是我的 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 ');
   }
});

希望这可以帮助