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

【问题标题】：Display AngularFireList data on HTML gets me an error在 HTML 上显示 AngularFireList 数据让我出错
【发布时间】：2018-08-07 16:05:37
【问题描述】：

我正在尝试在 Home.html 上显示从我的 firebase 检索到的数据，但我不断收到相同的错误：

找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

你能帮帮我吗？

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

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>

【问题讨论】：

console.log(this.users) 显示什么？
{query: Reference, update: ƒ, set: ƒ, push: ƒ, remove: ƒ, ...} auditTrail : ƒ (events) push : ƒ (data) query : Reference {repo: Repo , path: Path, queryParams_: QueryParams, orderByCalled_: false} remove : ƒ remove(item) set : ƒ dataOperation(item, value) snapshotChanges : ƒ (events) stateChanges : ƒ (events) update : ƒ dataOperation(item, value) valueChanges : ƒ (事件) proto : Object
FirebaseList - Unable to access parse data fetched from firebase的可能重复
我恢复了您上次的编辑，因为问题是针对问题的，答案是针对答案的。每个人都可以在您接受的答案中看到答案 :) 因为您接受了它，所以人们可以看到这个问题得到了解决。
@AndréKool 好吧！ Tksss 和我的错误使用:)

标签： javascript angular firebase-realtime-database ionic3 angularfire2

【解决方案1】：

改变这个：

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

到那个：

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

【讨论】：

这样做会显示以下错误：类型“Observable”不可分配给类型“AngularFireList”。 'Observable' 类型中缺少属性 'query'。
将用户：AngularFireList 更改为用户：Observable
同样的错误：找不到不同的支持对象'[object Object]'...
尝试：this.af.list('users').valueChanges().subscribe(users => {console.log(users)});
错误：类型“订阅”不可分配给类型“可观察的”。 “订阅”类型中缺少属性“_isScalar”。如果我将用户更改为用户： AngularFireList;我再次得到：类型“订阅”不可分配给类型“AngularFireList”。 “订阅”类型中缺少属性“查询”。

【解决方案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 中的“用户”中恢复值，如下所示：

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

【讨论】：