web-dev-qa-db-ja.com

Firestore：カスタムオブジェクトをdbに追加

おはようございます、

このクラスから新しく作成されたオブジェクトを追加しようとしました：

export class Sponsor implements ISponsor {

  title: string;    
  description?: string;
  creation: ICreation;

  constructor(title: string, description: string, author: string) {
     this.title = title;
     this.description = description;
     this.creation = new Creation(author);
  }
}

私のサービスでは、作成関数は次のようになります。

createSponsor(sponsor) {
   sponsor.id = this.afs.createId();
   return this.collection.doc(sponsor.id).set(sponsor);
}

この方法で試してみると、次のエラーが表示されます。

FirebaseError：[code = invalid-argument]：Function DocumentReference.set（）が無効なデータで呼び出されました。データはオブジェクトでなければなりませんが、それは次のとおりです。カスタムスポンサーオブジェクト

この問題を解決するにはどうすればよいですか？

angularfirebaseangularfire2google-cloud-firestore
13
Coach

Object.assign（{}、スポンサー）を使用することもできます

あなたの場合、それは

this.collection.doc(sponsor.id).set(Object.assign({}, sponsor));
24
sgt_lagrange

また、オブジェクトをJSONにシリアル化し、次のような通常のJavaScriptオブジェクトに逆シリアル化することもできます。

this.collection.doc(sponsor.id).set(JSON.parse( JSON.stringify(sponsor)));

深いネストで動作します。

7
Peter

ファビアン・ウィルズへのThx-わかった！

firebaseはオブジェクト内のデータをデータベースに送信できますが、データが戻ってくると、インスタンス化してクラスのインスタンスに戻すことはできません。したがって、クラスは許可されていません

次のようなオブジェクトを保存するだけです：

interface Person{
  name: string;
  age: number
}

var person: Person = { name: 'Toxicable', age: 22} ;
3
Coach

Firestoreはそれをサポートしていません。ただし、 https://github.com/typestack/class-transformer を使用できます。

2
Jürgen Brandstetter

私のソリューションでは、Interfaceがありました。

export interface Launch {
 id: string;
 date: Date;
 value: number;

}

constプロジェクト= {}起動として。

this.db.collection（ 'launches'）。add（project）;

2
Andre Evangelista

Firebaseからの本当に奇妙な動作です。そして、それを修正した方法-新しいインターフェイスを作成し、変換メソッドをクラスに追加することにより：

export class Happening {
 constructor(
  public date: EventDate,
  public participants: Array<string>,
  public title: string,
  public text: string,
  public uid?: string,
  public id?: string
 ){}

 public toDto = (): HappeningDto => {
  return {
    date: {
      year: this.date.year,
      month: this.date.month,
      day: this.date.day
    },
    participants: this.participants ? this.participants : [],
    title: this.title,
    text: this.text ? this.text : '',
    uid: this.uid,
    id: this.id ? this.id : null
  }
 }
}

export interface HappeningDto {
 date: {
  year: number,
  month: number,
  day: number
 },
 participants: Array<string>,
 title: string,
 text: string,
 uid?: string,
 id?: string
}

今、私はできる

add(event: Happening){
  event.uid = this.uid;
  this.$afs.collection<HappeningDto>('events').add(event.toDto())
    .then(
      (success) => console.log(success),
      (err) => console.warn(err)
    )
}
1
Anton Pegov

AngularおよびAngularFire2を使用する場合、AngularFirestypeを使用できます。このモジュールは、AngularFirestoreを置き換え、カスタムオブジェクトを使用してFirestoreに直接データを取得および設定できるようにすることを目的としています。

そのためには、3つの手順が必要です。

1. angle-firestypeをインストールします

`npm install angular-firestype --save`

2.マッピングオブジェクトを使用してAngularFirestypeモジュールを初期化する

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestypeModule, ModelType } from 'angular-firestype';
import { environment } from '../environments/environment';

import { User } from './user.ts';
import { Address } from './address.ts';
import { Message } from './message.ts';

/**
 * Definition of the app model mapping.
 * For more information, see https://github.com/bricepepin/angular-firestype#mapping-object.
 */
const model: {[key: string]: ModelType<any>} = {
  users: {
    type: User,
    arguments: ['username', 'image'],
    structure: {
      adress: Address
    },
    subcollections: {
      messages: Message
    }
  }
};

@NgModule({
 imports: [
   AngularFireModule.initializeApp(environment.firebase),
   AngularFireAuthModule,
   AngularFirestypeModule.forRoot(model),   // Import module using forRoot() to add mapping information
 ],
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ]
})
export class AppModule {}

3. AngularFirestypeサービスを挿入する

import { Component } from '@angular/core';
import { AngularFirestype, Collection, Document } from 'angular-firestype';

import { User } from './user.ts';

@Component({
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
})
export class AppComponent {
   const users: Observable<User[]>;
   const user: User;

   constructor(db: AngularFirestype) {
       const usersCollection: Collection<User> = db.collection<User>('users');
       usersCollection.valueChanges().subscribe(users => this.users = users);

       const userDoc: Document<User> = usersCollection.doc('user1');
       userDoc.valueChanges().subscribe(user => this.user = user);
       userDoc.set(this.user);
   }
}

基本的に、Angularfirestoreを使用するように、AngularFirestypeを使用できます。
詳細については、こちらのホームページをご覧ください： https://github.com/bricepepin/angular-firestype 。

0
Kheldar