Firestoreはデータを取得/表示できません

Question

Firestoreは、dataという名前のコレクションから収集したデータを取得/表示できないようです。これは私のコードを単純化しようとして以来起きています。

ここに私のコードです：

ファイル名：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() {} 

} 

がファイル名：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コレクション：

追加情報：

@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 

あなたは私のSource Code in GitHub

期待される結果を経由して私の問題を再現しようとすることができます：dashboard.component.htmlに表示する

すべてのデータ

現在の結果：

すべてのデータをさえ

表示されませんが、私が間違っていたどこかにありますか？

Answer 1

あなたの問題がどこにあるかわかります。

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