时间戳

首页 > 解决方案 > 无法使用 Firebase 和 Angular 显示数据

angular - 无法使用 Firebase 和 Angular 显示数据

问题描述

app.comoponent.ts

export class AppComponent {
    Angular: any[] = [];


constructor(db: AngularFireDatabase){
  db.list('/Angular').valueChanges()
  .subscribe(Angular =>{
    this.Angular = Angular;
    console.log(this.Angular);

  })
}

-----------

app.component.html

<ul>
  <li *ngFor= "let course of Angular">
    {{course.$values}}
  </li>
</ul>

无法在 Templet 中查看数据。控制台正在显示来自 firebase 的数组中的值。["course1", "course2", "course3"] 展开时显示键值对，但不显示 $value 来获取它。不确定它是如何工作的。我对这个领域相当陌生。

标签： angularfirebasefor-loopconsole

解决方案

尝试：

app.comoponent.ts

export class AppComponent {
    Angular: Observable<any[]>;


constructor(db: AngularFireDatabase){
  this.Angular = db.list('/Angular').valueChanges();
  
}

app.component.html

<ul *ngIf="Angular">
  <li *ngFor= "let course of Angular | async">
    {{course}}
  </li>
</ul>

如果您使用异步管道，那么在您的情况下，当 observable 发出一个值时，更改检测将始终启动Angular。

推荐阅读