首先,我必须说我正在学习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根本不返回错误,并且一切正常。但是,当我运行我的应用程序并尝试保存表单数据时,控制台将返回下一个错误:
我解决了将自定义对象传递给像这样的简单对象的问题:
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)); }
但我认为这不是正确的解决方案,可能会导致以后缩放应用程序的问题。
最佳答案
您可以尝试这种方式,希望您使用的是最新的 typescript
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);
,您将获得类的实例而不是对象。关于angular - 将数据添加到Firebase Cloud Firestore和Angular,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47110905/