Async pipe in Angular does not work with my custom observables

Question

Async pipe in Angular does not work with my custom observables

I've been trying to implement the async pipe in my template, but I'm encountering difficulties retrieving data from my API. To store and retrieve the data, I have utilized a behavior subject to create an observable. However, when I attempt to display the data on the HTML page, I encounter the following error:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to
Iterables such as Arrays

friendList.ts

  public friendSubject = new BehaviorSubject<any>(null);
  public friend$: Observable<any> = this.friendSubject.asObservable();


 getFriendList(userID: string) {
    userID = this.userID;
    try {
      return this.mainService.getFriendList(userID).subscribe((friendList) => {
        console.log(friendList)
        this.friendSubject.next(friendList);

        // friendList.data.forEach((friend => {
        // }))

        console.log(this.friendSubject)

      })
    }
    catch (err) {

    }
  }

friendList.html

  <ion-label class="friend-count" *ngIf="friend$ | async">{{(friend$ | async)?.length}}</ion-label> 
//this works..
   
            <div class="friend-list">
              <div *ngFor="let i = index; let friend of friend$ | async" class="friend">               
                  <div class="custom-img">
                    <ion-img class="friend-img" [src]="friend?.frendsView.photo"></ion-img>
                  </div>   
                  <ion-label></ion-label>             
    
              </div>

            </div>

https://i.sstatic.net/PZpMF.png

I'm really eager to understand why this isn't working, so if anyone has any insights, please share. Thank you.

angular typescript

Answer 1

Answer №1

In case you find yourself in need of utilizing a BehaviorSubject within an asynchronous workflow, here is a helpful resource: https://angular.io/api/common/AsyncPipe

Here's how you can implement this in your component:

friend$: Observable<[]> = [];

getFriendList(userId: string) {
  this.friend$ = this.mainService.getLastFriend(+userId).pipe(
    catchError(error => of(error))
  );
}

Implementation in your mainService:

private friendSubject = new BehaviorSubject<[]>(null);
private users = [
    {
        userId: 1,
        name: 'Max',
        friendList: {
          {id: 1, name: 'Bob'}, 
          {id: 2, name: 'Alex'},
          {id: 3, name: 'Kate'}
        }
    }
];

getLastFriend(userId: number): Observable<[]> {
  const friendList = this.getFriendList(userId);
  this.friendSubject.next(friendList);

  return this.friendSubject.asObservable();
}  

private getFriendList(userId: number): [] {
  return of(users).pipe(
    filter( ({userId}) => userId === userId),
    map(user => user.friendList)
  );
}

Answer 2

In case you find yourself in need of utilizing a BehaviorSubject within an asynchronous workflow, here is a helpful resource: https://angular.io/api/common/AsyncPipe

Here's how you can implement this in your component:

friend$: Observable<[]> = [];

getFriendList(userId: string) {
  this.friend$ = this.mainService.getLastFriend(+userId).pipe(
    catchError(error => of(error))
  );
}

Implementation in your mainService:

private friendSubject = new BehaviorSubject<[]>(null);
private users = [
    {
        userId: 1,
        name: 'Max',
        friendList: {
          {id: 1, name: 'Bob'}, 
          {id: 2, name: 'Alex'},
          {id: 3, name: 'Kate'}
        }
    }
];

getLastFriend(userId: number): Observable<[]> {
  const friendList = this.getFriendList(userId);
  this.friendSubject.next(friendList);

  return this.friendSubject.asObservable();
}  

private getFriendList(userId: number): [] {
  return of(users).pipe(
    filter( ({userId}) => userId === userId),
    map(user => user.friendList)
  );
}

Async pipe in Angular does not work with my custom observables

Answer №1

Similar questions

The ElementRef was modified following the activation of a click event

Angular displays an error message and applies an invalid class when a form is submitted

The expected property 'label' is not found in the object type '{ handleClick: () => void; }', but it is required in the object type '{ handleClick: () => void; label: string; }'

Using ngIf with Promises causes a malfunction

Error in MEAN Stack: Unable to access the property 'companyTitle' because it is undefined

Unable to correlate the response with the designated object

Can I include `ChangeDetectorRef` in an Angular 4 service constructor?

Tips for resolving conflicts between sequelize and angular within a lerna monorepo using typescript

Enhance the navigation scroll bar with a blur effect

What is the best method for arranging components?

Encountering the following error message: "E11000 duplicate key error collection"

Converting JSON objects into TypeScript classes: A step-by-step guide

Maintaining the consistent structure of build directories within a Docker container is crucial, especially when compiling TypeScript code that excludes the test

Encountering an issue with Angular virtual scrolling: ViewDestroyedError arises when trying to utilize a destroyed view during detectChanges operation

"Error encountered: Route class unable to reach local function in TypeScript Express application" #codingissues

Replicating an array of typed objects in Angular2

Unable to display complete content of Ionic 3 webpage

Following the upgrade to Angular 6, the [WDS] connection disconnects on Internet Explorer after the page has

Building secure and responsive routes using next.js middleware

Acquire Superheroes in Journey of Champions from a REST endpoint using Angular 2