Angular и Ionic 4 для прослушивания данных в реальном времени. Ошибка: InvalidPipeArgument: '' для канала 'AsyncPipe'

Я пытаюсь обновить сообщения в своем приложении ionic 4 в реальном времени, используя angularfire2 и базу данных firebase realtime. Код выглядит следующим образом

При запуске выдает ошибку исключения: InvalidPipeArgument: '' для канала 'AsyncPipe'

если я удалю слово async, оно будет отображаться нормально, но когда я отправляю новое сообщение из другого экземпляра, все данные повторяются.

html

<ion-list lines="full" style="background:transparent">
                    <ion-item  style="padding-top:10px;" *ngFor="let msg of messages | async">
                        <ion-row  style="width:100%;">
                            <ion-col size="3">
                                <ion-row>
                                    <ion-col class="sg-reg-text">{{formatName(msg.name)}}</ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col style="padding:0;padding-left:8px" class="sg-tiny-text"><ion-icon name="time" color="light"></ion-icon>&nbsp;now</ion-col>
                                </ion-row>
                            </ion-col>
                            <ion-col style="border-bottom: 1px solid #7e7c8d;padding-bottom: 10px">
                                <ion-row>
                                    <ion-col class="sg-reg-text">{{msg.message}}</ion-col>
                                </ion-row>
                            </ion-col>
                        </ion-row>
                    </ion-item>
              </ion-list>

ts

messages:Post[]
refresh(){
this.messages = []
this.sgSvc.getMessages().subscribe(
  (rsp:any) => {
                  for(let data of rsp){
                    console.log("hehe:" + JSON.stringify(data))
                    this.messages.push(new Post(data._name, data._message, data._uid))
                  }

                }
)
  }

ngOnInit() {
this.refresh()
}

svc.ts

private msgList: AngularFireList<Post>

getMessages () {

this.msgList = this.db.list<Post>('posts')
return this.msgList.snapshotChanges().pipe(
   map(changes => 
    changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
   )
  );
  }