Javascript 角2环形异步管道

我的酒店

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

我的content.html是

<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>

{{item.RoomType}
奥达奥泽利克勒里
...

---

我的目标是在html文件中绑定酒店房间。我读了一些关于stackoverflow的文章来使用shareReplay（1），但我没有为自己工作。如何实现这一点。

通过在getter中触发http请求，您已经创建了一个无限循环

当发生更改检测时，将调用getter。然后，getter发出一个http请求，触发更改检测，调用getter，等等

传递到异步管道的

roomList$

可观察对象应该创建一次，可能是在

ngOnInit

中

因此，您的

content.ts

将如下所示：

roomList$: Observable<RoomListType[]>;

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

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

而不是使用每次被引用时都会触发新http请求的getter

---

您的基本场景不会触发无限循环。

您能告诉我们HTTP请求的结果吗？根据模板，它应该是一个数组。对此，您不需要

shareReplay

操作符。另外，我建议将您的HTTP请求移出getter，因为它很可能会给您带来问题，请将其移到您的

ngOnInit

。非常感谢您，我们欢迎您！我希望有帮助。如果你发现它回答了你的问题，请接受它作为答案。

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