Fetch data Firebase in ngfor angular 6 not with angularFire

Question

I am using angular6 and Firebase (npm install Firebase). I would like to display the list of my users in a template with ngFor, here is my demarche :

ts :

constructor( ) {
var  users = new Promise((resolve, reject)=>{
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        firebase.database().ref('users').on('value',(data) =>
              resolve(data.val())     
      );
    }
  });
})

HTML

<tbody>
    <tr *ngFor="let user of users; let i = index">
        <td> {{user.nom}}</td>
        <td>{{user.prenom}}</td>
        <td>{{user.nom}}</td>
        <td>{{user.nom}}</td>
        <td>{{user.nom}}</td>
        <td>{{user.nom}}</td>
        <td></td>
        <td> <button (click)="onViewUser(i)" class="btn btn-primary"> 
                                        Rôle</button></td>
    </tr>     
</tbody>

Nothing is displayed in my tables, no error message on the console.

users is a Promise you need to resolve it by using .then — Niladri
– Niladri, Commented Sep 6, 2018 at 13:56
and use a property to store the data after resolving the Promise, you can use that property in *ngFor — Niladri
– Niladri, Commented Sep 6, 2018 at 13:58
Hello! Sorry for the inconvenience but I do not understand too much the answer can you be clearer please ... — Userbegin
– Userbegin, Commented Sep 6, 2018 at 22:16

sketchthat · Accepted Answer · 2018-09-07 00:16:57Z

There are a couple of things to take note of in your sample code.

You shouldn't put the logic into the constructor of an Angular Component. You should use lifecycle hooks, such as ngOnInit which fires after the component is initialised.

public users;

ngOnInit() {
  firebase.auth()
    .onAuthStateChanged(user => {
      if (user) {
        firebase.database().ref('users')
          .on('value', data => {
            this.users = data.val();
          });
      }
    });
}

Setting a var within the constructor doesn't make it a variable that's accessible from your view. Instead you need to use this.users.

It's best to wrap your table with an ngIf because the ngFor will throw an error if users is not defined.

<ng-template [ngIf]="users">
  <tbody>
    <tr *ngFor="let user of users; let i = index">
      <td>{{user.nom}}</td>
      <td>{{user.prenom}}</td>
      <td>{{user.nom}}</td>
      <td>{{user.nom}}</td>
      <td>{{user.nom}}</td>
      <td>{{user.nom}}</td>
      <td></td>
      <td> 
        <button (click)="onViewUser(i)" class="btn btn-primary">Rôle</button>
      </td>
    </tr>     
  </tbody>
</ng-template>

On a final note, there is a great package angularfire2 which is a wrapper/library for Angular to integrate with Firebase. It does a lot of the heavy lifting for you and makes things a bit easier when programming an Angular project. Take a look at it, it's worth the time to use.

Collectives™ on Stack Overflow

Fetch data Firebase in ngfor angular 6 not with angularFire

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related