Display observable after map

user_3492427 0
Viewed 237

I try to display a part of a list of item (pagination). My template :

<div class="notif" *ngFor="let notif of paginate() | async">
  {{notif.name}}
</div>

In my component if I do :

public notifications: Observable<Notification[]>;
public paginate(): Observable<Notification[]> {
    return this.notifications;
  }

This is working, but if I do :

public notifications: Observable<Notification[]>;
public paginate(): Observable<Notification[]> {
  return this.notifications.map((notif: Notification[]) => {
    return notif;
  });

It doesn't work anymore (I've simplified the function to understand what's going on). .map retuns an observable right? So it should work both ways?

rxjs angular
2 Answers

See: https://www.learnrxjs.io/learn-rxjs/operators/transformation/map

Create a pipeline in order to use operators (map, debounceTime, distinctUntilChanged, switchMap, etc): https://www.learnrxjs.io/learn-rxjs/concepts/rxjs-primer#pipe

private _notifications = new BehaviorSubject<Notification[]>([]);
public notifications$ = this._notifications.pipe(
  // Returns original list. You can map this data however you want here.
  map(notifications => notifications)
);

<div class="notif" *ngFor="let notif of (notifications$ | async)">
    {{notif.name}}
</div>
user_113083450
Related