Firestore 保存数据不稳定的结果答案

【问题标题】：Firestore Saving Data Erratic ResultsFirestore 保存数据不稳定的结果
【发布时间】：2018-08-07 00:58:14
【问题描述】：

使用 firestore realtime db（不是旧的 firebase db，新的）运行 angular 5 项目。

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

但是，当我在 Chrome 中未打开调试工具的情况下运行相同的进程时，它只会保存对象的一些属性。

我没有以任何方式更改我的代码，我正在使用相同的文件运行相同的进程。简单属性 createdAt 和 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 服务

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


}

【问题讨论】：

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

【解决方案1】：

以防万一将来有人阅读本文，感谢 Orion on codementor，我最终找到了问题的根源。

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

当不在调试模式下运行时，一些功能在之前的任务完成之前就已经运行，因此数据没有得到保存。

在某些步骤上使函数与 await 异步，确保所有依赖于上一步的步骤都已完成（作为 Promise），确保每次都保存数据。

【讨论】：