CODEWITHSUNDEEP
angular
Raphaël Etang-Salé
Raphaël Etang-Salé

Reputation: 390

Subscribe with table

In my situation I have 2 questions:

1) Why my method returns 2 times the same object when I use the console.log

2) Why my method is not working when I add my filter. The console.log returns the object but I got nothing in my HTML.

In my backend everything is ok, and reduxTool shows me exactly one time each object. So I think my error is in my pipe. If I delete the filter everything is ok but I really need this.

    requestList$: Observable<FriendRequest[]>;

    this.storefriends$.dispatch(new FriendsRequestFeatureStoreActions.GetFriendRequests());

    this.requestList$ = this.storefriends$.pipe(
      skipWhile(val => val === null),
      select(
        FriendsRequestFeatureStoreSelectors.selectAllFriendsRequest
      ),
      mergeMap((value: FriendRequest[]) => from(value)),
      filter((friend: any) => friend.to._id === this.user.profile),
      reduce((acc: FriendRequest[], friend: FriendRequest) => {
        console.log(friend);
        return acc.concat(friend);
      }, [])
    );

This is my HTML: 


 <div *ngFor="let f of requestList$ | async">
    ...          
 </div>

 <div *ngIf="(requestList$| async)?.length == 0">
  not request right now...
  </div>

When I run in the HTML, I have nothing. Thanks if someone can help me.

Upvotes: 0

Views: 54

Answers (1)

penleychan
penleychan

Reputation: 5470

You are getting multiple calls because everytime we use the async pipe, we create a subscription. 

<div *ngFor="let f of requestList$ | async">
    ...          
 </div>

<div *ngIf="(requestList$| async)?.length == 0">
  not request right now...
</div>

To fix that you would just use the as keyword

<div *ngIf="requestList$ | async as requestList">
  <div *ngFor="let f of requestList">
    ...          
 </div>

 <div *ngIf="requestList?.length == 0">
     not request right now...
 </div>
</div>

Upvotes: 2

Related Questions