typescript - Obtener datos de Firebase en ngfor angular 6 no con angularFire

Estoy usando Angular6 y Firebase (npm install Firebase). Me gustaría mostrar la lista de mis usuarios en una plantilla con ngFor, aquí está mi procedimiento:

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>

No se muestra nada en mis tablas, no hay mensaje de error en la consola.

Respuesta #1

Hay un par de cosas a tener en cuenta en tu código de ejemplo.

No deberías poner la lógica en el constructor de un Componente de Angular. Deberías usar hooks del ciclo de vida, como ngOnInit que se ejecuta después de que el componente se inicializa.

public users;

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

Establecer un var dentro del constructor no lo convierte en una variable que sea accesible desde tu vista. En su lugar, necesitas usar this.users.

Es mejor envolver tu tabla con un ngIf porque el ngFor lanzará un error si users no está definido.

<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>

Para finalizar, hay un gran paquete angularfire2 que es un envoltorio/biblioteca para Angular para integrarse con Firebase. Hace gran parte del trabajo pesado por ti y hace las cosas un poco más fáciles al programar un proyecto de Angular. Échale un vistazo, vale la pena usarlo.