Я пытаюсь добавить продукт с выбранным размером в локальное хранилище, но моя проблема в том, что я не знаю, как добавить размер и сделать только один элемент с продуктом из firebase и сохранить его в локальном хранилище. У меня проблема с тем, что продукт может быть добавлен только один с размером, и у меня появляется ошибка «ОШИБКА TypeError: a.push не является функцией», когда я пытаюсь добавить больше продуктов.
ПОДРОБНАЯ СТРАНИЦА HTML:
<form class="contact-form" [formGroup]="contactForm">
<select name="size" [(ngModel)]="itemSize" formControlName="contactFormSize">
<option value="" disabled>Choose size</option>
<option *ngFor="let item of sizeFields" [value]="item.size">
{{ item.size }}
</option>
</select>
<button [disabled]="contactForm.invalid" (click)="onSubmit(product)" type="submit" mdbWavesEffect>Send</button>
</form>
ДЕТАЛЬНАЯ СТРАНИЦА TS:
private sub: any;
product: Product;
sizeFields: Array<any> = [
{size: "s"},
{size: "m"},
{size: "l"},
{size: "xl"},
{size: "xxl"}
]
itemSize = '';
contactForm: FormGroup;
constructor(
private route: ActivatedRoute,
private productService: ProductService,
private fb: FormBuilder,
private toastrService: ToastrService
) {
this.product = new Product();
this.contactForm = fb.group({
contactFormSize: ['', Validators.required],
});
}
ngOnInit() {
this.sub = this.route.params.subscribe((params) => {
const id = params['id'];
this.getProductDetail(id);
});
}
getProductDetail(id: string) {
const x = this.productService.getProductById(id);
x.snapshotChanges().subscribe(
(product) => {
const y = product.payload.toJSON() as Product;
y['$key'] = id;
this.product = y;
},
(error) => {
this.toastrService.error('Error while fetching Product Detail', error);
}
);
}
onSubmit(data: Product): void {
let a: Product[];
a = JSON.parse(localStorage.getItem('cart_item')) || [];
a.push(data);
this.toastrService.wait('Adding Product to Cart', 'Product Adding to the cart');
setTimeout(() => {
localStorage.setItem('cart_item', JSON.stringify({a, size: this.itemSize }));
}, 500);
}
ОБСЛУЖИВАНИЕ ПРОДУКТА:
products: AngularFireList<Product>;
product: AngularFireObject<Product>;
constructor(private db: AngularFireDatabase) { }
getProducts() {
this.products = this.db.list('products');
return this.products;
}
getProductById(key: string) {
this.product = this.db.object('products/' + key);
return this.product;
}
МОДЕЛЬ ПРОДУКТА:
export class Product {
$key: string;
id: string;
name: string;
price: number;
color: string;
fit: string;
fabric: string;
size: string;
}
ПУНКТ ПОЖАРНОЙ БАЗЫ:
