Я смотрю учебник Моша Хамедани с использованием Angular версии 6, но проблема в версии учебника 4. Я работаю над проектом электронной коммерции на кнопке AddToCart, где продукт должен увеличить свое количество, нажав кнопку кнопка и обновляется в Firebase с использованием productId, а также, если я пытаюсь добавить новый продукт, то идентификатор этого нового продукта должен быть добавлен в базу данных AngularFire.
У меня ошибка в последней строке item.update () и item.quantity. Пожалуйста, пройдите код и предложите мне лучшее решение. Заранее спасибо
Вот код.
торговые-cart.service.ts
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Product } from '../model/product';
import { take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ShoppingCartService {
constructor(private db: AngularFireDatabase, ) { }
private create() {
return this.db.list('/shopping-cart').push({
dateCreated: new Date().getTime()
})
}
private getCart(cartId: String) {
return this.db.object('/shopping-cart/' + cartId);
}
private getItem(cartId:string, productId: String) {
return this.db.object('/shopping-cart/' + cartId + '/items/' +productId);
}
private async getOrCreateCart() {
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.getOrCreateCart();
let item$ = this.getItem(cartId, product.key);
item$.valueChanges().pipe(take(1)).subscribe(item => {
// I'am getting error in update() and quantity
item.update({ product: product,quantity: (item.quantity || 0) + 1});
})
}
}
Ожидаемые результаты состоят в том, что после нажатия кнопки «Добавить в корзину» количество продукта должно быть обновлено в базе данных
Посмотрите мои другие файлы (для справки)
1. home.component.html (при нажатии этой кнопки происходит переход к файлу .ts, как показано ниже)
<div class="card-footer">
<button (click)="addToCart(product)" style="background: #2980b9;
color:white" class="btn btn-block">Add to Cart
</button>
</div>
- home.component.ts (здесь определено событие клика)
addToCart(product:Product) {
this.cartService.addToCart(product);
}
и последний файл
3. shopping-cart.service.ts
private async getOrCreateCart() {
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.getOrCreateCart();
let item$ = this.getItem(cartId, product.key);
item$.valueChanges().pipe(take(1)).subscribe(item => {
item$.update({ product: product,quantity: (item.quantity || 0) + 1});
})
}
Вот изображения ошибок:
1. Ошибка вернулась
2. Теперь, когда я изменяю вышеуказанный код addToCart (product: Product), который выглядит так:
async addToCart(product: Product) {
let cartId = await this.getOrCreateCart();
let item$ = this.getItem(cartId, product.key);
item$.snapshotChanges().pipe(take(1)).subscribe((item: any) => {
if(item.key != null) {
item$.update({ product: product,quantity: (item.quantity || 0) + 1});
} else {
item$.set( {product:product, quantity:1});
}
});
}
Я получаю следующую ошибку:
Это все, что у меня есть ... Пожалуйста, посмотрите ошибки еще раз и предложите лучшее решение ... Заранее спасибо