类型“ AngularFireObject <{}>”

时间:2018-11-11 10:45:32

标签: angular typescript angularfire2 angularfire

我是Angular的初学者。我正在使用Angular版本6观看Mosh Hamedani的教程,但问题是该教程的版本是4。我正在使用AddToCart按钮进行电子商务项目,该产品应通过单击按钮来增加数量,并进行更新在Firebase中使用productId,并且如果我尝试添加新产品,则该新产品的ID也应添加到AngularFire数据库中。

现在一切正常,在shopping-cart.service.ts文件中出现错误。错误出现在最后一行 async addToCart(product:Product)中,该错误表明AngularFireObject类型上不存在属性管道。

这是代码。

shopping-cart.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Product } from '../models/products';
import { take } 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 getItem(cartId: string, productId: string){
    return this.db.object('/shopping-carts/' + cartId + '/items/' + productId);
}

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.getItem(cartId, product.key);
    item$.pipe(take(1)).subscribe(item => {
        item$.update({ product: product, quantity:(item.quantity || 0) + 1 });
    });
}

}

6 个答案:

答案 0 :(得分:1)

这里的问题是您的this.getItem()方法没有返回Observable,而是返回了AngularFireObject,它没有pipe属性,因此您应该调用valuChanges方法将返回Observable

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

答案 1 :(得分:0)

也许不是将这一行更改为         return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();

保留原样 return this.db.object('/shopping-carts/' + cartId + '/items/' + productId) 然后在该函数中,您要先调用getItem函数,然后再订阅该函数,您可以在那里添加值更改 应该是

`private getItem(cartId: string, productId: string){
        return this.db.object('/shopping-carts/' + cartId + '/items/' + productId);
    }
 async addToCart(product: Product){
        let cartId = await this.getOrCreateCartId();
        let item$ = this.getItem(cartId, product.key).valueChanges();
        item$.pipe(take(1)).subscribe(item => {
            item$.update({ product: product, quantity:(item.quantity || 0) + 1 });
        });
    }`

答案 2 :(得分:0)

在编写此答案时,在AngularFireObject中,您必须使用valueChanges()snapshotChanges()。您可以阅读documentation here

如果您只是从中修改代码,就会引起您的关注

item$.pipe(take(1)).subscribe(item => {})

item$.valueChanges().pipe(take(1)).subscribe(item => {})

将解决您的问题。

答案 3 :(得分:0)

async  addToCart(product:Product){

  let cartId= await this.getOrCreateCart();
  let item$$=this.getItem(cartId,product.key);
  let item$=this.getItem(cartId,product.key).snapshotChanges();
    item$.pipe(take(1)).subscribe(item=>{
      this.data=item.payload.val();

        if(this.data!= null){
          item$$.update({product:product,quantity:(this.data.quantity)+1});
        }else{
          item$$.set({product:product,quantity:1});
        }


    });
  }

答案 4 :(得分:0)

在代码中进行以下更改:

do2

只需签出我在Angular 7中构建的Github存储库My Github Link,您的Angular 6项目就可以正常工作。

答案 5 :(得分:0)

我认为最好的答案是不完整的-正如@Sharad Sharma所说,这会导致错误:

属性“更新”在类型上不存在 'Observable >'和属性'quantity'不 存在于类型“ AngularFireObject <{}>”上。现在会显示此类错误

要消除此错误,您需要输入object()函数。 例如 如果您的'/ shopping-carts /'+ cartId +'/ items /'+ productId节点在firebase中具有两个键/值对:

name: "test",
quantity: 1

创建对象:

export class Product {
    name: string;
    quantity: number;

    constructor() {}
}

然后执行以下操作:

this.db.object<Product>('/shopping-carts/' + cartId + '/items/' + productId)...