在 HTML 上显示 AngularFireList 数据让我出错

Question

我试图在 Home.html 上显示从我的 firebase 检索到的数据，但我一遍又一遍地收到相同的错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

你能帮帮我吗？

我的应用程序中有以下代码：

user.service.ts

import { AngularFireList } from 'angularfire2/database/interfaces';
import { AngularFireDatabase } from 'angularfire2/database';

export class UserService {

  users: AngularFireList<User[]>;

  constructor(
    public http: HttpClient,
    public af: AngularFireDatabase
  ) {
    this.users = this.af.list('users');
  }

  create(user: User): void {
    this.af.list('users').push(user);
  }
}

home.ts

import { UserService } from './../../providers/user/user.service';
import { AngularFireList } from 'angularfire2/database/interfaces';

export class HomePage {

  users: AngularFireList<User[]>;

  constructor(
    public navCtrl: NavController,
    public userService: UserService
  ) {

  }

  ionViewDidLoad(){
    this.users = this.userService.users;
  }

home.html

<ion-content padding>

  <ion-list no-lines>
    <button ion-item *ngFor="let user of users">
      {{ user.name }}
    </button>
  </ion-list>

  <button ion-button block (click)="onSignUp()">Sign Up</button>
</ion-content>

Answer 1

改变这个：

this.users = this.af.list('users');

到那个：

this.users = this.af.list('users').valueChanges();

Answer 2

编辑：2018-08-06

这已经解决了我的问题：

在我的 user.service.ts 上，我已经这样声明了我的变量：

usersRef: AngularFireList<any>;
users: Observable<any[]>;

在构造函数中：

this.usersRef = this.af.list('users');
this.users = this.usersRef.valueChanges();
this.users.subscribe(res => console.log(res));

这样我就可以在 HTML 上恢复 'users' 的值，如下所示：

<ion-list no-lines>
    <button ion-item *ngFor="let user of users | async">
      {{ user.name }}
    </button>
</ion-list>

在home.ts中：

users: Observable<any[]>;

ionViewDidLoad(){
  this.users = this.userService.users;
}

在 HTML 上显示 AngularFireList 数据让我出错

Display AngularFireList data on HTML gets me an error

javascript

firebase-realtime-database

angularfire2

ionic3

angular