Question

目前我在使用带有Ionic 2应用程序注释的FirebaseListObservable时遇到问题。

Firebase内部的结构是

- commentkey
 -- userID
 -- message
 -- Timestamp

我从firebase收到Observable并用

显示

<div *ngFor="let comment of comments | async">
      <div ion-item>
        <div class="picture"></div>
        <div class="comment-content">
          <div>
            <div class="comment-id">{{comment.id}} <br /> {{comment.timestamp | date: 'dd. MMM. yyyy HH:mm'}}</div>
          </div>

          <div class="comment-message">
            <span text-wrap class="message">{{comment.message}}</span>
          </div>

          <div class="reply" *ngFor="let reply of comment.reply | keys">
           <span (click)="goToReply(comment.$key)" >{{reply}} Antwort(en)</span>
          </div>
        </div>
      </div>
<div>

所以一切正常。我可以添加新的或删除新的评论，行为很正常。

下一步，为了获得具有用户ID的用户的更多数据，我构建了一个管道，使用UserID获取更多信息并使用新数据返回Observable。

export class OrderByPipe implements PipeTransform{

newArray: Array<Object> = [];
 constructor(public authServ: AuthenticatorService) {

 }
 transform(array: FirebaseListObservable<any>, args: string): Observable<any> {

   //if(!array || array === undefined || array.length === 0) return null;

  array.subscribe(data =>{
    data.forEach(element =>{
     console.dir(element)
      var user = this.authServ.getUserByID(element['id'])
      element['email'] = user.email;
      element['avatar'] = user.avatar;

      this.newArray.push(element);

    })
  })


    return Observable.of(this.newArray);
  }

当我用

将它带到html时

<div *ngFor="let comment of comments | orderby | async">

一切都显示正确。

当我添加或删除评论时，问题就开始了。它加载数据库中的所有注释，并将它们添加到现有注释的末尾。

删除评论前的示例

Comment1
Comment2 (delete this comment)
Comment3
Comment4

删除评论后

Comment1
Comment2
Comment3
Comment4
Comment1
Comment3
Comment4

目前，我并不了解Observable的所有内容，如果有人对我有建议，我该如何解决这个问题会很好。

Answer 1

您应该在订阅中重置数组。

一个重要的键，当您更新firebase数据时，它将再次执行订阅并刷新您的应用程序。

当组件被销毁时，异步管道取消订阅。

export class OrderByPipe implements PipeTransform{
  newArray: Array<Object> = [];
  constructor(public authServ: AuthenticatorService) { }
  transform(array: FirebaseListObservable<any>, args: string): Observable<any> {
  //if(!array || array === undefined || array.length === 0) return null;
  array.subscribe(data =>{
     data.forEach(element =>{
         console.dir(element);
         newArray = [];
         var user = this.authServ.getUserByID(element['id']);
         element['email'] = user.email;
         element['avatar'] = user.avatar;
         this.newArray.push(element);
     });
  });
  return Observable.of(this.newArray);
}

FirebaseListObservable将async与自己的管道相结合

1 个答案: