CODEWITHSUNDEEP
firebase-realtime-databaseionic2pipeobservable
Stevetro
Stevetro

Reputation: 1963

FirebaseListObservable combine async with own pipe

Currently I'm facing a problem converting a FirebaseListObservable with comments for my Ionic 2 application.

The structure inside Firebase is

- commentkey
 -- userID
 -- message
 -- Timestamp

I receive the Observable from firebase and display it with 

<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>

So everything works fine. I can add new or delete new comments and the behaviour is quite normal.

For the next step, to get more Data of the User with the User ID, I build a pipe, get some more Information with the UserID and return Observable with the new Data.

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

When I bring it to the html with

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

Everything is shown correct.

The problems start when I add or delete a comment. It loads all the comments from the Database and adds them to the end of the already existing comments.

For Example before deleting an comment

Comment1
Comment2 (delete this comment)
Comment3
Comment4

After deleting an comment

Comment1
Comment2
Comment3
Comment4
Comment1
Comment3
Comment4

Currently, I don't understand everything about Observable so would be nice if someone of you has an advice for me, how I can fix that problem.

Upvotes: 0

Views: 105

Answers (1)

Fabio Campinho
Fabio Campinho

Reputation: 1022

You should reset the array inside the subscribe.

An important key, when you update firebase data it will execute the subscription again and refresh your app.

Async pipe unsubscribes when the component is destroyed.

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

Upvotes: 1

Related Questions