Angular 2 Endless loop async pipe

Question

My hotel.service.ts

getRoomList(): Observable<RoomListType[]> {
    return this.http.get<RoomListType[]>('http://localhost:3001/rooms');
}

my content.ts is

get roomList$() {
    return this.hotelService.getRoomList().pipe(shareReplay(1));
}

my content.html is

<div class="col-md-9" *ngFor="let item of (roomList$ | async)">
      <div class="row">
        <div class="col-md-4">{{ item.RoomType }}</div>
        <div class="col-md-8 d-flex justify-content-end">
          <button class="ml-1 btn btn-outline-danger btn-sm" (click)="openScrollableContent(longContent)"><i class="fa fa-bed"></i>Oda Özellikleri</button>
        </div>
      </div>
...
</div>

My goal is I want to bind hotel rooms in my html file. I read some article on stackoverflow to use shareReplay(1) but I didnt work for me. How can I achieve this.

Can you show us the result of the HTTP request? According to your template, it should be an array. You don't need the shareReplay operator for this. Also, I would recommend moving your HTTP request out of the getter which is most likely giving you problems, move it to your ngOnInit instead. — David Fontes
– David Fontes, Commented Sep 14, 2020 at 21:11

MikeJ · Accepted Answer · 2020-09-16 04:01:29Z

2

You've created an infinite loop by triggering an http request inside that getter.

When change detection occurs, your getter will be called. Your getter then makes an http request, which triggers change detection, which calls your getter, etc.

The roomList$ Observable you're passing to the async pipe should be created once, probably in ngOnInit.

So your content.ts would look something like this:

roomList$: Observable<RoomListType[]>;

ngOnInit() {
  this.roomList$ = this.hotelService.getRoomList();
}

shareReplay doesn't seem necessary in your situation—that's used if you might have late subscribers to your Observable who should receive the last emitted value immediately upon subscription rather than having to wait for the Observable to emit again.

And if you did have that situation, you would configure it more like this:

getRoomList() {
  return this.roomList$.pipe(shareReplay(1));
}

rather than with a getter that triggers a new http request every time it's referenced.

Here's a StackBlitz with your basic scenario not triggering an infinite loop.

answered Sep 16, 2020 at 4:01

MikeJ

2,34416 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikeJ Over a year ago

You're welcome! I hope it helps. If you find that it answers your question, please accept it as the answer.

Collectives™ on Stack Overflow

Angular 2 Endless loop async pipe

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related