Угловая 5 - асинхронная труба с огненной базой

Question

Я хочу добавить асинхронную трубу к угловой базе, но у меня есть ошибка, которую я не знаю, как исправить:

Ошибка: InvalidPipeArgument: '[объект объекта]' для канала 'AsyncPipe'

База данных Firebase NoSQL:

{
  "boss" : [ null, {
    "isPremium" : true,
    "name" : "John",
    "students" : 10000
  } ],
  "users" : [ null, "user", "user2" ]
}

UPDATE

Я изменил код компонента:

user$: AngularFireList<any>;

  constructor(db: AngularFireDatabase) {
    this.user$ = db.list("/users");
  }

HTML:

<ul>
  <li *ngFor="let user of user$ | async">
    {{ user }}
  </li>
</ul>

Я получаю ту же ошибку ... В Angular версии 4 это работает, но как это исправить в Angular 5.2.0 ??

Answer 1

Вы получаете эту ошибку, потому что async pipe работает с Observables, а возвращаемые вами данные - нет.

Возможно, вы захотите изменить свой код на это:

user$: Observable<any[]>;

  constructor(db: AngularFireDatabase) {
    this.user$ = db.list("/users").snapshotChanges();
  }

Или это:

constructor(db: AngularFireDatabase) {
   this.user$ = db.list("/users"). valueChanges();
}

Answer 2

Попробуйте перейти по этой ссылке: https://www.youtube.com/watch?v=GEdxydnpNFs Он объясняет шаг за шагом, как загружать предметы с угловой 5 и огненной базой

Answer 3

Канал async работает с наблюдаемыми в качестве аргумента. Ошибка ясно говорит о том, что поле user$ не является наблюдаемым.

Может быть, вы хотели подписаться на valueChanges() наблюдаемую из db.object()?

Взгляните сюда: https://github.com/angular/angularfire2/blob/master/docs/rtdb/objects.md

UPDATE

Кажется, что AngularFireList<any> не является Наблюдаемым, поэтому вы получите ту же ошибку.

Как я могу видеть из документации angularfire2 , метод list() возвращает объект в последней версии, которая имеет метод valueChanges(). Попробуйте изменить код, вызвав метод valueChanges() и используя асинхронный канал для получения наблюдаемой.

Подробнее здесь: https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md#50