CODEWITHSUNDEEP
angularrxjs
user10412277
user10412277

Reputation:

How to implement a switchMap (rxjs) and a tap (rxjs) for close pull to refresh

I have to create a pull to refresh feature when I pull it down, it's spinning forever and data does not come too. I use switchMap and tap loadComplete$ when data response but it does not tap. Could I return any instead as Observable?.

export class FriendListComponent  implements OnInit {
  defaultPhoto = `https://www.freeiconspng.com/uploads/no-image-icon-4.png`;
  updateUsersTrigger$ = this.loadNotifyService.requestLoad$;
  users: any = this.updateUsersTrigger$.pipe(
    switchMap(() => {
      return this.friendListService.getData();
    }),
    tap(this.loadNotifyService.loadComplete$)
  );
  constructor(
    private db: AngularFirestore,
    private friendListService: FriendListService,
    private loadNotifyService: LoadNotifyService
  ) {}
  ngOnInit() {
    this.friendListService.getData().subscribe(data => {
      this.users = data;
    });
  }
}

In firebase.services

@Injectable()
export class FriendListService {
  data$: BehaviorSubject<Array<any>> = new BehaviorSubject([]);}
  constructor(private db: AngularFirestore) {
    const data = ...query from Firestore
    this.data$.next(data)
  }
  getData() {
    return this.data$.asObservable();
  }
}

In LoadNotifyService

@Injectable()
export class LoadNotifyService {
  requestLoad$ = new Subject<any>();
  loadComplete$ = new Subject<any>();
}

Upvotes: 1

Views: 5307

Answers (1)

user10412277
user10412277

Reputation:

Okay, My fault is an async pipe forgetfulness in my HTML. 

<mat-sidenav-content>
  <mat-card>
    <mat-list>
      <mat-list-item *ngFor="let user of **(users | async)**">
        <img mat-list-avatar [src]="(user.user | async)?.photoUrl || defaultPhoto ">
        <h3 mat-line>{{(user.user | async)?.displayName || "ใครก็ไม่รู้ค่ะ"}}</h3>
        <p mat-line>{{user?.updated | amLocale:'th' | amTimeAgo}}</p>
        <p mat-line>
          <span>{{user.msg | async}}</span>
        </p>
      </mat-list-item>
    </mat-list>
  </mat-card>
</mat-sidenav-content>

Because

users: any = this.updateUsersTrigger$.pipe(
    switchMap(() => {
      return this.friendListService.getData();
    }),
    tap(this.loadNotifyService.loadComplete$)
  );

That returns an Observable, I forget to an async pipe that a tap is not resolved.

Upvotes: 1

Related Questions