Angular и Ionic 4 для прослушивания живых данных Ошибка: InvalidPipeArgument: '' для канала 'AsyncPipe' - PullRequest
Новая
       18

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

0 голосов
/ 09 января 2019

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

При запуске выдает исключение Ошибка: 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>

ц 

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

1 Ответ

0 голосов
/ 09 января 2019

Попробуйте следующее, используя оператор RxJS map(), чтобы построить массив объектов Post, вместо того, чтобы каждый раз выдвигать элементы на messages в subscribe(). Вы получаете дубликаты данных при удалении канала async с вашим текущим кодом, потому что вы не реинициализируете массив в пустой массив. В любом случае вы не будете использовать async трубу с Array<T>: 

messages: Observable<Post[]>;

// ...

this.messages = this.sgSvc.getMessages().pipe(
  map((messages: any) => messages.map(m => new Post(m._name, m._message, m._uid)));
);

Вы также можете подойти к нему без async трубы: 

messages: Post[] = [];

// ...

this.sgSvc.getMessages().subscribe((messages: any) => {
  this.messages = messages.map(m => new Post(m._name, m._message, m._uid));
});

Надеюсь, это поможет!

...