Firebase Cloud FirestoreとAngularにデータを追加する

Question

まず、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)); 
} 

活字体doesnの持っていますエラーはまったく返されず、すべてが正常であるようです。しかし、私は私のアプリを実行し、フォームのデータを保存しようとすると、コンソールは次のエラーを返します。

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 
} 

とデータを保存：

AdminProductComponent.html:51 ERROR Error: Function CollectionReference.add() requires its first argument to be of type object, but it was: a custom Product object

私はそれがこのような単純なオブジェクトにカスタムオブジェクトを渡す解決しました

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

しかし、私はそれが適切な解決策ではないと思う、おそらく将来の問題をアプリのスケーリングにつなげる可能性があります。

Answer 1

あなたがこの方法を試すことができますが、あなたはproduct.component.tsに最新typescriptです

product.ts

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

を使用している願っています

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);