Angular 和 Ionic 4 监听实时数据错误：InvalidPipeArgument: '' for pipe 'AsyncPipe'

Question

我正在尝试使用 angularfire2 和 firebase 实时数据库实时更新我的​​ ionic 4 应用程序中的消息。代码如下所示

运行时抛出异常 错误：InvalidPipeArgument: '' for pipe '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() }))
   )
  );
  }

Answer 1

尝试以下使用 RxJS map() 运算符构建 Post 对象数组，而不是每次在 subscribe() 中将项目推送到 messages。当您使用当前代码删除 async 管道时，您会收到重复数据，因为您没有将数组重新初始化为空数组。无论哪种方式，您都不会使用带有Array<T> 的async 管道：

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

希望对您有所帮助！