javascript - Angular5 - 使用无效数据调用错误 : Function DocumentReference. set()。数据必须是对象，但它是:自定义 PlatformModel 对象

Question

我已经在谷歌上找到了一些人们解决这个问题的帖子。但我无法在我的项目中重现解决方案。

我的界面:

declare module PlatformInterface {

    export interface Design {
        primaryColor: string;
        backgroundImage: string;
    }

    export interface Saga {
        id: string;
        name: string;
        short_desc: string;
        desc: string;
        manga: Manga[];
        anime: Anime[];
    }

    export interface Root {
        id: string;
        name: string;
        design: Design[];
        saga: Saga[];
    }

}

我的模型:

export class PlatformModel implements PlatformInterface.Root {
    id: string;
    name: string;
    design = [];
    saga = [];

    constructor(obj?: any) {
        this.id = obj.name.toLowerCase().replace(' ', '-');
        this.name = obj.name;
        this.design = obj.design;
        this.saga = obj.saga;
    }
}

我的服务:

@Injectable()
export class PlatformService {

    public list$: Observable<PlatformModel[]>;

    private _platform: AngularFirestoreCollection<PlatformModel>;

    constructor(db: AngularFirestore) {
        this._platform = db.collection<PlatformModel>('platforms');
        this.list$ = this._platform.valueChanges();
    }

    /** Get Platform by id */
    get(id: string): Observable<PlatformModel> {
        return this._platform.doc<PlatformModel>(id).valueChanges();
    }

    /** Add / Update Platform */
    set(id: string, platforms: PlatformModel) {
        return fromPromise(this._platform.doc(id).set(platforms));
    }

    /** Remove Platform */
    remove(id: string) {
        return fromPromise(this._platform.doc(id).delete());
    }

}

我在 Component.ts 中的函数

constructor(public _platformService: PlatformService) {
}

addPlatform(name: string) {
    if (name !== '') {
        const platform = new PlatformModel({
            name: name,
            design: [],
            saga: []
        });

        this._platformService.set(platform.id, platform).subscribe();
    }
}

Angular 编译器不会抛出任何错误，但是当我尝试启动 addPlatform 函数时，我在浏览器中遇到了这个错误:

ERROR Error: Function DocumentReference.set() called with invalid data. Data must be an object, but it was: a custom PlatformModel object

错误说数据必须是一个对象，但它是否已经是一个对象？我的意思是我在服务中定义它:

public list$: Observable<PlatformModel[]>;

[] 是否成为对象？

Answer 1

我在这里找到了一些说明 Firestore: Add Custom Object to db

while firebase could send the data inside your object to the database, when the data comss back it cannot instantiate it back into an instance of your class. Therefore classes are disallowed

我对自定义类的解决方法是

 this.db.collection(`${this.basePath}/`).doc(custom_class.$key)
.set(Object.assign({}, JSON.parse(JSON.stringify(custom_class))))
.then( ret => {
  log.debug('file added', ret);
}).catch( err => {
  log.error(err);
});

所以我猜你的情况是

    /** Add / Update Platform */
set(id: string, platforms: PlatformModel) {
    return fromPromise(this._platform.doc(id).set(Object.assign({},JSON.parse(JSON.stringify(platforms))));
}