Question

Firestore似乎无法检索/显示从名为data的Collection收集的数据。自从我尝试简化代码以来，这种情况就开始发生了。

这是我的代码：

文件名：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

Firestore无法检索/显示数据

1 个答案: