代码之家  ›  专栏  ›  技术社区  ›  Prateek Chitransh

Take不是函数:角度7 |可观察。Take抛出运行时错误

  •  2
  • Prateek Chitransh  · 技术社区  · 7 年前

    我正在构建一个购物车,我使用了一个购物车服务,其中我将数量分配给一个产品/将一个产品添加到购物车。除了使用take获取可观察项$的第一个实例之外,还有其他方法吗?

    我正在正确导入take操作符,但它一直给我运行时错误。如果我不使用take,那么分配的数量是某个随机整数,而不是1。

    在下面的代码中,我在对可观察对象使用take()时遇到以下错误:

    import { Injectable } from '@angular/core';
    import { AngularFireDatabase } from 'angularfire2/database';
    import { Product } from '../app/models/product';
    import 'rxjs/add/operator/take';//tried this one too
    import { take } from 'rxjs-compat/operator/take';
    
    @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);
        item$.take(1).subscribe(item=>{
          if(item.$exists()) item$.update({quantity : item.quantity + 1});
          else item$.set({product : product , quantity : 1 });
        });
      }
    
    }
    
    
    
    
    Error: Uncaught (in promise): TypeError: item$.take is not a function. (In 'item$.take(1)', 'item$.take' is undefined) http://localhost:4200/main.js:1581:35 step@http://localhost:4200/main.js:1534:27 fulfilled@http://localhost:4200/main.js:1506:62 onInvoke@http://localhost:4200/vendor.js:46707:39 run@http://localhost:4200/polyfills.js:2483:49 http://localhost:4200/polyfills.js:3217:37 onInvokeTask@http://localhost:4200/vendor.js:46698:43 runTask@http://localhost:4200/polyfills.js:2533:57 drainMicroTaskQueue@http://localhost:4200/polyfills.js:2940:42 invokeTask@http://localhost:4200/polyfills.js:2845:40 invokeTask@http://localhost:4200/polyfills.js:3885:20 globalZoneAwareCallback@http://localhost:4200/polyfills.js:3911:27
    resolvePromise — zone.js:814
    (anonymous function) — zone.js:724
    fulfilled — products.component.ts:11
    onInvoke — core.js:14143
    run — zone.js:138
    (anonymous function) — zone.js:872
    onInvokeTask — core.js:14134
    runTask — zone.js:188
    drainMicroTaskQueue — zone.js:595
    invokeTask — zone.js:500
    invokeTask — zone.js:1540
    globalZoneAwareCallback — zone.js:1566
    
    1 回复  |  直到 7 年前
        1
  •  8
  •   Community Mohan Dere    6 年前

    我注意到的两个问题是:

    1. 进口-应为: import { take } from 'rxjs/operators';

    2. 你应该使用 pipe :就你而言:

      item$.pipe(take(1)).subscribe(...)

    here