Firestore kann Daten nicht abrufen/anzeigen

Question

Firestore scheint Daten aus einer Sammlung mit dem Namen data nicht abrufen/anzeigen zu können. Dies begann, seit ich versucht habe, meinen Code zu vereinfachen.

Hier ist mein Code:

Dateiname: database.component.ts

import { Component, OnInit } from '@angular/core'; 

import { Observable } from 'rxjs/Observable'; 
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from 'angularfire2/firestore'; 

export interface Data { 
    P_U: string; 
    R_I: string; 
    R_P: string; 
    D_A: string; 
} 

export interface DataID extends Data { 
    id: string; 
} 

@Component({ ... }) 
export class DatabaseComponent implements OnInit { 

    private dataCollection: AngularFirestoreCollection<Data>; 
    public datas: Observable<DataID[]>; 

    constructor(private readonly afs: AngularFirestore) { 
    this.dataCollection = afs.collection<Data>('data', ref => ref.orderBy('Date', 'asc')); 
    this.datas = this.dataCollection.snapshotChanges().map(actions => { 
     return actions.map(a => { 
     const data = a.payload.doc.data() as Data; 
     const id = a.payload.doc.id; 

     return { id, ...data }; 
     }); 
    }); 
    } 

    ngOnInit() {} 

} 

Dateiname: database.component.html

<div class="section grey darken-4"> 
    <div class="container row center white-text"> 
    <h2>Back-End Database</h2> 
    <p class="flow-text">Reveal all protected back-ends here</p> 
    <a class="waves-effect waves-light btn purple"> 
     <i class="material-icons left">chevron_right</i> 
     New Data 
    </a> 
    </div> 
</div> 

<div class="section grey darken-4"> 
    <div class="container row white-text"> 
    <p class="flow-text">Database Entries</p> 

    <table class="responsive-table"> 
     <thead> 
     <tr> 
      <th>Protected URL</th> 
      <th>Revealed IP</th> 
      <th>Revealed Port</th> 
      <th>Date Added</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr *ngFor="let data of datas | async"> 
      <td>{{ data.P_U }}</td> 
      <td>{{ data.R_I }}</td> 
      <td>{{ data.R_P }}</td> 
      <td>{{ data.D_A }}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

Firebase Collection:

Zusätzliche Information:

@angular/animations: 5.1.2 
@angular/common: 5.0.0 
@angular/compiler: 5.0.0 
@angular/core: 5.0.0 
@angular/forms: 5.0.0 
@angular/http: 5.0.0 
@angular/platform-browser: 5.0.0 
@angular/platform-browser-dynamic: 5.0.0 
@angular/router: 5.0.0 
angular2-materialize: 15.1.10 
angularfire2: 5.0.0-rc.5-next 
core-js: 2.4.1 
firebase: 4.8.0 
hammerjs: 2.0.8 
jQuery: 3.2.1 
materialize-css: 0.100.2 
ngx-toastr: 8.0.0 
rxjs: 5.5.2 
zone.js: 0.8.14 

Sie könnten versuchen, mein Problem über meine Source Code in GitHub

Erwartetes Ergebnis zu reproduzieren:

Alle Daten in dashboard.component.html angezeigt werden

Aktuelles Ergebnis:

Alle Daten nicht auch nicht

angezeigt

Gibt es irgendwo ich schief gelaufen?

Answer 1

Scheint ich weiß, wo ist dein Problem.

this.dataCollection = afs.collection<Data>('data', ref => ref.orderBy('Date', 'asc')); 
                     ^^^^ 
                    change to D_A