Display observed after the map

Question

I am trying to display part of a list of items (pagination). My template:

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

In my component, if I do this:

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

This works, but if I do this:

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

This does not work anymore (I simplified the function to understand what is happening). .map removes watched right? Therefore, should it work in both directions?

Answer 1

This is incorrect because you are trying to return the notification [] to a function that returns Observable of Notification [], so it will not work. If you need a Notification [], you need to Subscribe to an Observation.

You cannot match Observable in another type.

eg.

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


notificationArr: Notification[];

// This needs to be inside a method not in the class declaration of variables and methods
paginate().subscribe((notif: Notification[]) => {
return (this.notificationArr = notif);

  }); // should populate your array