Ionic Angular Firestore: неправильно индексировать массив?

Question

В настоящее время я возлюсь с пожарным магазином, чтобы разобраться с основами. Однако у меня возникают проблемы с чтением моих данных (в виде массива документов в коллекции), так как они индексируются в порядке, который я не могу понять. По сравнению с базой данных в реальном времени, она была упорядочена в зависимости от времени, когда она была отправлена ​​в базу данных. Я понимаю, что сейчас есть реализация для индексирования в firestore, поэтому я создал метку времени в полях моих документов.

проблема: попытка прочитать данные в хронологическом порядке, как они были отправлены в firestore, и отобразить их в том же порядке в hmtl. Шоу в странном порядке

Все еще учусь, поэтому проблема, вероятно, более очевидна, чем я понимаю, заранее спасибо.

HTML:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-input placeholder = "Your name" [(ngModel)] = "name" >  </ion-input>
 <ion-input placeholder = "Your age" [(ngModel)] = "age" >  </ion-input>
 <ion-input placeholder = "Your sex" [(ngModel)] = "sex" >  </ion-input>
 <ion-input placeholder = "Your race" [(ngModel)] = "race" >  </ion-input>

 <button ion-button (click) = "submit()"> Submit </button>
 <br>
 <button ion-button (click) = "peek()"> Peek </button>
 <br>
 <button ion-button (click) = "load()"> Load </button>

 <ion-item *ngFor = "let person of people">
  <h3> {{person.name}} </h3>
  <p> Age: {{person.age}}</p>
  <p> Sex: {{person.sex}}</p>
  <p> Race: {{ person.race }}</p>
 </ion-item>


</ion-content>

TS:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import firebase from "firebase";
import "firebase/firestore";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public name: string;
  public age: string;
  public sex: string;
  public race: string;
  public db;
  public colRef;
  public docRef;
  public people: Array<any>;

  constructor(public navCtrl: NavController) {
    this.db = firebase.firestore(); 
    this.colRef = this.db.collection("people");
  }

  submit(){
    this.db.collection("people").add({
      name: this.name,
      age: this.age,
      sex: this.sex,
      race: this.race,
      timeCreated: new Date().getTime()
    }).then(cont => {
      alert("Data uploaded!");
      this.name = "";
      this.age = "";
      this.sex = "";
      this.race = "";
    });
  }

  peek(){
    alert("Name: "+ this.name);
  }

  load(){
    this.colRef.get().then( snapshot => {
      this.people = [];
      snapshot.forEach(doc => {
        var data = doc.data();
        this.people.push({
          id: doc.key,
          name: data.name,
          age: data.age,
          sex: data.sex,
          race: data.race,
          timeCreated: data.timeCreated
        });
      });
      console.log(this.people);

    });
  }
}

Структура данных Firestore: рис

Отображение данных в приложении / порядок: рис

Консольный журнал массива данных, полученных из пожарного хранилища: рис