Свойство pipe не существует для типа AngularFireObject <{}>

Question

Я новичок в Angular. Я смотрю учебник Моша Хамедани с использованием Angular версии 6, но проблема в том, что учебная версия 4. Я работаю над проектом электронной коммерции для кнопки AddToCart, где продукт должен увеличить свое количество, нажав кнопку и обновив в Firebase с использованием productId, а также, если я пытаюсь добавить новый продукт, то идентификатор этого нового продукта должен быть добавлен в базу данных AngularFire.

Все работает отлично, теперь я получаю сообщение об ошибке в файле shopping-cart.service.ts. Ошибка находится в последней строке async addToCart (product: Product) , где ошибка показывает, что конвейер свойств не существует для типа AngularFireObject.

Вот код.

торговые-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 });
    });
}

}

Answer 1

Внесите следующие изменения в ваш код:

async addToCart(product: Product){
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.key);
    item$.snapshotChanges().pipe(take(1)).subscribe(item => {
       item$.update({ product: product, 
                      quantity: (item.payload.exportVal().quantity || 0) + 1 });
    });
}

Просто проверьте мой репозиторий Github My Github Link , встроенный в Angular 7. Ваш проект Angular 6 будет работать нормально.

Answer 2

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


    });
  }

Answer 3

возможно вместо изменения этой строки на 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 });
        });
    }`

Answer 4

На момент написания этого ответа в AngularFireObject вы должны использовать либо valueChanges(), либо snapshotChanges(). Вы можете прочитать документацию здесь

Приходите к вам, если вы просто измените свой код с

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

до

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

решит вашу проблему.

Answer 5

проблема здесь в том, что ваш метод 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 });
    });
}