将数据添加到Firebase Cloud Firestore和Angular

Question

首先,我要说我正在学习Angular.也许答案太明显但我看不到它.我在网上搜索了类似问题的回复,但我没有发现任何对我有用的问题.

我制作了一个Angular Template Driven Form,用于在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()要求其第一个参数是object类型,但它是:自定义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)); }

但我认为这不是正确的解决方案,可能会导致应用程序未来出现问题.

Answer 1

我使用了typescript spread operator

  add(wizard: Wizard): Promise<DocumentReference> {
    return this.wizardCollection.add({...wizard});
  }

Answer 2

你可以尝试这种方式,希望你使用最新的打字稿

product.ts

export interface Product {
   code: string;
   desc: string;
   stock: number;
   price: number;
   off: number;
   details?: string
}

在你的product.component.ts中

export class AdminProductComponent {

model:Product;
successMsg = 'Data successfully saved.';

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

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

    this.model = {
      code:'',
      desc:'',
      stock:0,
      price:0,
      off:0
    }
}

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

我认为通过这样做model = new Product('', '', 0, 0, 0);你得到的类的实例不是对象.

Answer 3

我用了

save() {
    const param = JSON.parse(JSON.stringify(this.model));
    this.productsRef.add(param).then( _ => alert(this.successMsg));
 }