在 Angular 中从 Firebase 获取和显示数据

Question

我在 firebase 中有一些记录，我想将其显示在我的 HTML 页面上。我附上了数据库的结构。现在，我想以数组形式显示年份（可点击）。选择特定年份时，我希望在我的代码中检索相应的记录。

我尝试检索年份，但无法在页面上显示它们。我尝试了一个静态数组作为 years=["1999","1994"] 有效。只有数据库中的数据没有被检索和显示。

<div class="list-group " *ngFor="let year of years">

    <a routerLink="records"  routerLinkActive="active" >
        <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year}}</a>

</div>

export class NavigationComponent implements OnInit {
  @ViewChild('sidenav', {static: true}) sidenav: ElementRef;

  //years = ['1999', '2004', '2019'];
  clicked: boolean;
  resizedImage: Blob;

  years:AngularFireList<any[]>;
  // TODO: Need to fix the click effect of years





  constructor(af:AngularFireDatabase,
    private router: Router,

    //private userService: UserService
    //private ng2ImgMax: Ng2ImgMaxService
  ) {
    this.clicked = this.clicked === undefined ? false : true;
    this.years=af.list('/years/Akhilesh');}

那是打字稿代码^

Answer 1

您的代码中存在多个问题。

首先，由于您正在从使用静态数组转向从数据库进行调用，因此您现在必须使用 Observable 这将影响您的模板——您需要通过管道 | async.

（为了演示，我将在示例中输出 JSON，您需要根据实际对象结构进行调整）：

<div class="list-group" *ngFor="let year of years | async">
  {{ year | json }}
</div>

如果您需要更多关于这里发生的事情，请参阅 this part of the Angular Tour of Heros tutorial。

接下来，您的years声明需要调整：

years: Observable<any>;

（理想情况下，您会使用 Finnish Notation 来命名 Observable，但为了与您的代码保持一致，我将省略它）。

当然，如果您还没有导入它，您还需要：

import { Observable } from 'rxjs';

最后，仅存储 AngularFireList 对象是不够的，您必须实际订阅更改。在这种情况下，我将使用 snapshotChanges 来提供包括键在内的完整结构，但您也可以根据需要查看 valueChanges。（要访问“1994”等键，您需要在模板中使用 year.key 和 snapshotChanges）。

    this.years=af.list('/years/Akhilesh').snapshotChanges();

我建议您仔细查看 AngularFire 文档中的 example。

在 Angular 中从 Firebase 获取和显示数据

Get and display data from Firebase in Angular

firebase

typescript

firebase-realtime-database

angularfire2

angular