FirebaseListObservableは自分のパイプと非同期を組み合わせます

Question

現在、私は、Ionic 2アプリケーションのコメント付きFirebaseListObservableの変換に問題があります。 Firebase内部

構造は

- commentkey 
-- userID 
-- message 
-- Timestamp 

である私はfirebaseから観測を受けて、だから、すべてが正常に動作します

<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を持つユーザーのデータをさらに取得するために、パイプを作成し、ユーザーIDを使用してさらに情報を取得し、新しいデータで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); 
    } 

私は

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

すべてが正しい示されてHTMLにそれを持って来ます。

コメントの追加または削除時に問題が発生します。 データベースからすべてのコメントを読み込んで、既存のコメントの最後に追加します。あなたの誰かがためのアドバイスを持っている場合など

現在コメント

Comment1 
Comment2 
Comment3 
Comment4 
Comment1 
Comment3 
Comment4 

を削除した後、コメント

Comment1 
Comment2 (delete this comment) 
Comment3 
Comment4 

を削除する前に、私はとてもいいだろう観測についてのすべてを理解していません私はその問題をどのように解決することができますか？

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