Добавление данных в Firebase Cloud Firestore и Angular

Прежде всего я должен сказать, что я изучаю Angular. Может быть, ответ слишком очевиден, но я не вижу его. Я искал ответы на похожие вопросы в Интернете, но не нашел ни одного, который бы работал для меня.

Я создал форму на основе угловых шаблонов для хранения продуктов в моей базе данных Firebase Cloud Firestore. Я создал модель под названием «Продукт»

product.ts

export class Product {
constructor(
    public code: string,
    public desc: string,
    public stock: number,
    public price: number,
    public off: number,
    public details?: string
) {}

}

Затем у меня есть product.component .ts

import { Component } from '@angular/core';
import { Product } from './product';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';


@Component({
    selector: 'app-admin-product',
    templateUrl: 'product.component.html'
})

export class AdminProductComponent {

model = new Product('', '', 0, 0, 0);
successMsg = 'Data successfully saved.';

productsRef: AngularFirestoreCollection<Product>;
product: Observable<Product[]>;

constructor(private afs: AngularFirestore) {
    this.productsRef = this.afs.collection<Product>('productos');
}

save() {
    this.productsRef.add(this.model).then( _ => alert(this.successMsg));
}

TypeScript вообще не возвращает ошибок, и все вроде бы нормально. Но когда я запускаю свое приложение и пытаюсь сохранить данные формы, консоль возвращает следующую ошибку:

AdminProductComponent.html: 51 Ошибка: функция CollectionReference.add () требует, чтобы ее первый аргумент имел тип объект, но это было: пользовательский объект Product

Я решил, передав пользовательский объект в простой объект, подобный этому:

const product = {
    code: this.model.code,
    desc: this.model.desc,
    stock: this.model.stock,
    price: this.model.price,
    off: this.model.off,
    details: this.model.details
}

И сохранив данные, как это:

save() {
    this.productsRef.add(product).then( _ => alert(this.successMsg)); }

Но я думаю, что это не правильное решение, может быть, это может привести к будущим проблемам, приводящим к сбою приложения.

8
задан Marcelo J Forclaz 4 November 2017 в 12:47
поделиться