How to get data from angular firebase in 2019?

Question

I have looked through the entire net... I have applied fireship tutorials and more. I cannot get data from firebase in angular. Please Help.

These are my three methods:

Getting data but its not being called in ngFor HTML.

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

  });
  return this.queriedItems;
} 

Getting only one msg instead of all saved messages from 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;
 }

And this one gives me an ERROR (please see below)

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)

My feed component for calling the 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();
}

And this is my HTML

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

Answer 1

Change this:

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

Into this:

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

Then change:

feed: AngularFireList<ChatMessage>;

constructor(private chat: ChatService) { }

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

Into this:

feed;

constructor(private chat: ChatService) { }

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

Change this:

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

Into this:

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

The async pipe is used with an observable.

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

feeds is of type AngularFireList which is not an observable.

Therefore add valueChanges() which returns an Observable of data as a synchronized array. Then inside the ngOnInit() subscribe to that observable and iterate inside the array feed in the ngFor

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