Subscription is not assignable to NgIterable-CodePudding

Goal: I want to Display User Data in the Frontend

I have a user model IPerson of the following structure

export interface IPerson {
  name: string;
  email: string;
  passwort: string;
}

In an auth Service, i created an observable of this type, which should hold profile information as soon as i next() some into it

  public loggedInUserData = new ReplaySubject<IPerson>();

In a profile component, i want to get the latest payload of this observable and store it

  public profiles$ = this.authService.loggedInUserData.subscribe((res) => {
    return res;
  });

And finally, i want to display the user Data received in html

  <tr *ngFor="let profile of profiles$">
  <td>{{ profile.name }}</td>
  <td>{{ profile.email }}</td>
  <td>{{ profile.passwort }}</td>
</tr>

Problem, i get the following error:

Type 'Subscription' is not assignable to type 'NgIterable<any> | null | undefined'

CodePudding user response：

Thinking that you need scan rxjs operator to accumulate IPerson object as Observable<IPerson[]>.

import { scan } from 'rxjs/operators';

public profiles$: Observable<IPerson[]> = this.authService.loggedInUserData
  .asObservable()
  .pipe(scan((acc, curr) => [...acc, curr], []));

And use async pipe to subscribe to the observable.

<tr *ngFor="let profile of profiles$ | async">
  <td>{{ profile.name }}</td>
  <td>{{ profile.email }}</td>
  <td>{{ profile.passwort }}</td>
</tr>

Sample StackBlitz Demo