如何在 2019 年从 angular firebase 获取数据？

Question

我翻遍了整个网络...我已经应用了 fireship 教程等等。我无法在 angular 中从 firebase 获取数据。请帮忙。

这是我的三个方法：

获取数据但未在 ngFor 中调用 HTML。

getMessage(): AngularFireList<ChatMessage> {
  this.db.list('messages').valueChanges().subscribe(queriedItems => {
  console.log(queriedItems);

  });
  return this.queriedItems;
}

只从 firebase 获取一条消息而不是所有保存的消息

 returnMessages(): AngularFireList<ChatMessage> {
   this.db.list('messages').valueChanges().subscribe(msg => {
     this.msg = msg;
     this.msgArr.push(msg)
     console.log("test push ", this.msgArr)
   });
   return this.msgArr;
 }

这个给了我一个错误（请看下面）

getMessages(): AngularFireList<ChatMessage> {
  return this.db.list('messages', ref => {
    return ref.limitToLast(25).orderByKey();
  });
}

FeedComponent.html:2 ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError (common.js:4323) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy (common.js:4934) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4924) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4906) at Object.eval [as updateDirectives] (FeedComponent.html:2) at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911) at checkAndUpdateView (core.js:23307) at callViewAction (core.js:23548) at execComponentViewsAction (core.js:23490) at checkAndUpdateView (core.js:23313)

我调用 getMessage() 的提要组件：

feed: AngularFireList<ChatMessage>;

constructor(private chat: ChatService) { }

ngOnInit() {
  console.log("feed initializing...")
  this.feed = this.chat.getMessages();
  console.log("Feed ", this.feed);
}

ngOnChanges() {
  this.feed = this.chat.getMessages();
}

这是我的 HTML

<div class="feed">
  <div *ngFor="let message of feed | async" class="message">
    <app-message [chatMessage]=message></app-message>
  </div>
</div>

Answer 1

改变这个：

getMessages(): AngularFireList<ChatMessage> {
  return this.db.list('messages', ref => {
    return ref.limitToLast(25).orderByKey();
  });
}

进入这个：

getMessages() {
  return this.db.list('messages', ref => ref.orderByKey().limitToLast(25)).valueChanges();
}

然后更改：

feed: AngularFireList<ChatMessage>;

constructor(private chat: ChatService) { }

ngOnInit() {
  console.log("feed initializing...")
  this.feed = this.chat.getMessages();
  console.log("Feed ", this.feed);
}

进入这个：

feed;

constructor(private chat: ChatService) { }

ngOnInit() {
  console.log("feed initializing...")
this.chat.getMessages().subscribe(items => {
  console.log(items);
  this.feeds = items 
});
}

改变这个：

<div class="feed">
  <div *ngFor="let message of feed | async" class="message">
    <app-message [chatMessage]=message></app-message>
  </div>
</div>

进入这个：

<div>
  <div *ngFor="let message of feed" class="message">
    <app-message [chatMessage]=message></app-message>
  </div>
</div>

async 管道与 observable 一起使用。

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted

feeds 属于 AngularFireList 类型，它不是可观察的。

因此添加valueChanges()其中returns一个Observable数据作为同步数组。然后在 ngOnInit() 中订阅该可观察对象并在 ngFor

中的数组 feed 中迭代

https://angular.io/api/common/AsyncPipe

如何在 2019 年从 angular firebase 获取数据？

How to get data from angular firebase in 2019?

javascript

firebase

firebase-realtime-database

angularfire2

angular