Получить данные Firebase в формате ngfor angular 6 не с angularFire

Question

Я использую angular6 и Firebase (npm установить Firebase). Я хотел бы отобразить список моих пользователей в шаблоне с ngFor, вот мой демарш:

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>

В моих таблицах ничего не отображается, на консоли нет сообщений об ошибках.

Answer 1

Есть несколько вещей, на которые следует обратить внимание в вашем примере кода.

Вы не должны помещать логику в constructor углового компонента.Вы должны использовать ловушки жизненного цикла, такие как ngOnInit, который срабатывает после инициализации компонента.

public users;

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

Установка var в constructor не делает его переменной, доступной с вашей точки зрения.,Вместо этого вам нужно использовать this.users.

Лучше всего обернуть вашу таблицу ngIf, потому что ngFor выдаст ошибку, если users не определено.

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

В заключение отметим, что имеется отличный пакет angularfire2, который представляет собой оболочку / библиотеку для Angular для интеграции с Firebase.Это делает много тяжелой работы для вас и делает вещи немного проще при программировании проекта Angular.Посмотрите на это, стоит потратить время на использование.