Question

我遇到一个问题，即take（1）不是角度火力目标对象的函数。我可以尝试使用valuechages或snapshotchanges，但这对我来说无济于事，因为我不得不使用它，但是还有其他问题。我使用的是角度6。

这是我的版本详细信息：-

Angular CLI: 6.2.5
Node: 8.12.0
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.5
@angular-devkit/build-angular     0.8.5
@angular-devkit/build-optimizer   0.8.5
@angular-devkit/build-webpack     0.8.5
@angular-devkit/core              0.8.5
@angular-devkit/schematics        0.8.5
@angular/cli                      6.2.5
@angular/fire                     5.1.0
@ngtools/webpack                  6.2.5
@schematics/angular               0.8.5
@schematics/update                0.8.5
rxjs                              6.3.3
typescript                        2.9.2
webpack                           4.20.2

如果使用订阅方法，我会遇到同样的问题。

这是我的代码：-

import { Injectable, OnDestroy } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import 'rxjs/add/operator/take';
import { Product } from './models/product';
import { Subscription } from 'rxjs/Subscription';
import { take, map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ShoppingCartService  {



  suscription: Subscription ;

  constructor(private db: AngularFireDatabase) { }

  async addToCart(product: Product) {
    this.updateItemQty(product, 1);
  }

  async removeFromCart(product) {
    this.updateItemQty(product, -1);
  }

  async getCart() {
    const cartId = await this.getOrCreateCartId();
    return this.db.object('/shopping-cart/' + cartId)

  }

  async clearAllCart() {
    const cartId = await this.getOrCreateCartId();
    return this.db.object('/shopping-cart/' + cartId).remove();
  }

  private async updateItemQty(product: Product, change: number) {
    const cartId = await this.getOrCreateCartId();
    const item$ = this.getItem(cartId, product.$key);
    item$.take(1).subscribe(item => {
      const quantity = (item.quantity || 0) + change;
      if (quantity === 0) { item$.remove(); } else { item$.update({
        title: product.title,
        imageUrl: product.imageUrl,
        price: product.price,
        quantity: quantity
      });
      }
    });
  }

  private createCartId() {
    return this.db.list('shopping-cart').push({
      dateTime: new Date().getTime()
    });
  }

  private async getOrCreateCartId(): Promise<string> {
    let cartId = localStorage.getItem('cardId');
    if (cartId) { return cartId; }

    const cart = await this.createCartId();

    cartId = localStorage.getItem('cardId');
    if (cartId) { return cartId; }

    localStorage.setItem('cardId', cart.key);
    return cart.key;
  }

  private getItem(cartId, key) {
    return this.db.object('/shopping-cart/' + cartId + '/items/' + key);
  }

}

所以，我不能使用snapshotchanges（）和valuechanges（），因为那样我将无法使用，或者出现类似-item.quantity，item $ .remove和item $ .update的错误。

为什么@ angular / fire 5.1.0不能使用take（1）或subscription？

请提出建议或其他替代实施方式。

Answer 1

由于您使用的是Angular 6，因此使用的是rxjs版本6。在此rxjs版本中，您使用“ take”（和其他运算符）的方式已更改。

您需要像这样转换代码

item$.pipe(take(1))
            .subscribe(item => {
            const quantity = (item.quantity || 0) + change;
            if (quantity === 0) { item$.remove(); } else { item$.update({
                title: product.title,
                imageUrl: product.imageUrl,
                price: product.price,
                quantity: quantity
            });
            }
        });

此外，您需要将import语句更改为

import { take } from 'rxjs/operators';

Item $ .take不是函数TypeError：item $ .take不是函数

1 个答案: