unable to display data using Firebase and Angular

Question

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>

---

Not able to see data on in Templet. Console is showing values in array which are from firebase. ["course1", "course2", "course3"] when expanded it is showing key value pairs but not $value to grab it. Not sure how it works. I am fairly new to this field.

question from:https://stackoverflow.com/questions/65921211/unable-to-display-data-using-firebase-and-angular

Answer 1

Try:

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>

If you use async pipe then change detection will allways kick in when observable emits a value, in your case Angular.