在 ngfor angular 6 中获取数据 Firebase，而不是使用 angularFire答案

【问题标题】：Fetch data Firebase in ngfor angular 6 not with angularFire在 ngfor angular 6 中获取数据 Firebase，而不是使用 angularFire
【发布时间】：2018-09-06 13:50:20
【问题描述】：

我正在使用 angular6 和 Firebase（npm install Firebase）。我想用 ngFor 在模板中显示我的用户列表，这是我的 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>

我的表格中没有显示任何内容，控制台上也没有错误消息。

【问题讨论】：

users 是一个Promise 你需要使用.then解决它
并在解析Promise后使用属性存储数据，您可以在*ngFor中使用该属性
您好！很抱歉给您带来不便，但我不太了解答案，请您说的更清楚...

标签： typescript firebase firebase-realtime-database angular6

【解决方案1】：

在您的示例代码中有几件事需要注意。

您不应该将逻辑放入 Angular 组件的 constructor 中。您应该使用生命周期挂钩，例如在组件初始化后触发的ngOnInit。

public users;

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

在constructor 中设置var 不会使其成为可从您的视图中访问的变量。相反，您需要使用this.users。

最好用ngIf 包裹您的表格，因为如果未定义users，ngFor 将引发错误。

<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 项目时使事情变得更容易。看看吧，值得花时间使用。

【讨论】：