Firestore保存数据不稳定的结果

时间:2018-02-27 11:31:21

标签: javascript angular typescript firebase google-cloud-firestore

使用firestore实时数据库(不是旧的firebase数据库,新的数据库)运行一个角度5项目。

我有一个非常奇怪的问题,我将数据保存到Firestore,当我使用Chrome调试运行我正在保存的对象正在按预期工作。

但是,当我在Chrome中打开调试工具时运行相同的过程时,它只会保存对象上的一些属性。

我没有以任何方式更改我的代码,而且我使用相同的文件运行相同的进程。 createAt和updatedAt的简单属性正在保存,但数据对象未保存的对象数组。除非我在调试模式下运行代码,否则一切正常。

非常困惑。欢迎任何想法。

APP组件

import { Component } from '@angular/core';
import { FirestoreService } from './firestore.service';


import * as xmlLoader from 'xml2js';
import { parseString } from 'xml2js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  name = 'Angular 5';

  constructor(private fss: FirestoreService) {

  }

  resultSet = [];

  loadXmlFile(files: FileList) {

    Array.from(files).forEach(file => {
      const myReader: FileReader = new FileReader();
      myReader.readAsText(file);

      const propertyString = this.removeExtFromFileName(file.name);

      this.extractKronosConfiguration(myReader, this.resultSet, propertyString);
    });

    this.emitKronosConfiguration(this.resultSet);

  }

  removeExtFromFileName(file): string {
    return file.slice(0, -4);
  }

  emitKronosConfiguration(resultSet) {
    this.fss.add('kronos', resultSet);
  }

  private extractKronosConfiguration(myReader, resultSet, propertyString) {

    myReader.onloadend = function (e) {

      xmlLoader.parseString(myReader.result, (err, response) => {
        resultSet[propertyString] = [];
        if (response.Kronos_WFC.Response !== undefined) {
          response.Kronos_WFC.Response.forEach(responseItem => {
            if (responseItem[propertyString] !== undefined) {
              responseItem[propertyString].forEach(item => {
                if (item.$ !== undefined) {
                  resultSet[propertyString].push(item.$);
                }
              });
            }


});
    }
  });
};

} }

FIRESTORE SERVICE

import { Injectable } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection,
  AngularFirestoreDocument
} from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';

type CollectionPredicate<T> = string | AngularFirestoreCollection<T>;
type DocPredicate<T> = string | AngularFirestoreDocument<T>;

@Injectable()
export class FirestoreService {

  colRef: any;

  constructor(
    public afs: AngularFirestore) {

  }

  col<T>(ref: CollectionPredicate<T>, queryFn?): AngularFirestoreCollection<T> {
    return typeof ref === 'string' ? this.afs.collection<T>(ref, queryFn) : ref;
  }

  add<T>(ref: CollectionPredicate<T>, data) {
    const timestamp = this.timestamp;
    return this.col(ref).add({
      ...data,
      updatedAt: timestamp,
      createdAt: timestamp
    });
  }

  get timestamp() {
    return firebase.firestore.FieldValue.serverTimestamp();
  }


}

1 个答案:

答案 0 :(得分:0)

以防万一有人在将来阅读本文时,由于Orion在编码器上,我最终找到了问题的根源。

基本上这是异步编程的古老问题。基本上当我在调试中运行时,我停止程序查看代码,因此异步任务在完成下一步之前完成。

当没有在调试模式下运行时,某些功能在前一个任务完成之前就已经运行,因此数据没有被保存。

通过等待某些步骤使函数异步,确保完成了依赖于前一步骤的所有步骤(作为Promise),确保每次都保存数据。