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.

Raz Ronen · Accepted Answer · 2021-01-27 14:44:40Z

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.

edited Jan 27, 2021 at 14:44

answered Jan 27, 2021 at 14:39

Raz Ronen

2,6683 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mr.Manhattan Over a year ago

note that the console.log in their example logs a plain string array. no idea where the $values is coming from.

Raz Ronen Over a year ago

The definition of the array items are any, so it can contain $values

Raz Ronen Over a year ago

I removed the .$values from the html just so he/she could first see something in the page, and then drill down to what he specifically want from that object. Thanks for comment

Mr.Manhattan · Accepted Answer · 2021-01-27 14:40:47Z

So first of all, let's get the types straight.

export class AppComponent {
    // as your console.log showed, this is a simple string array:
    courseList: string[] = [];
}

Note that i changed the name of the variable, Angular doesn't properly describe it's content. But that is ofc personal taste. Also note that instance variables are usually declared in camelCaps, starting with a small letter. But that again, is personal taste.

Then, angular provides lifecycle hooks. fetching async data should be done in the ngOnInit function:

export class AppComponent implements OnInit {
    courseList: string[] = [];

    constructor(private db: AngularFireDatabase){};

    ngOnInit() {
        this.db.list('/Angular').valueChanges().subscribe(courseList => {
            this.courseList = courseList;
            console.log(this.courseList);
        });
    }
}

now in the template, you can bind directly to the values:

<ul>
  <li *ngFor= "const course of courseList">
    {{course}}
  </li>
</ul>

Collectives™ on Stack Overflow

unable to display data using Firebase and Angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related