Angular 7 - добавить продукт из firebase с выбранным свойством в локальное хранилище - PullRequest
0 голосов
/ 13 января 2019

Я пытаюсь добавить продукт с выбранным размером в локальное хранилище, но моя проблема в том, что я не знаю, как добавить размер и сделать только один элемент с продуктом из 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;
}

ПУНКТ ПОЖАРНОЙ БАЗЫ:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...