[英]Angular 2 Endless loop async pipe
我的hotel.service.ts
getRoomList(): Observable<RoomListType[]> {
return this.http.get<RoomListType[]>('http://localhost:3001/rooms');
}
我的 content.ts 是
get roomList$() {
return this.hotelService.getRoomList().pipe(shareReplay(1));
}
我的 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>
我的目标是我想在我的 html 文件中绑定酒店房间。 我阅读了一些关于 stackoverflow 的文章以使用 shareReplay(1) 但我没有为我工作。 我怎样才能做到这一点。
您已经通过在该 getter 中触发 http 请求创建了一个无限循环。
当发生变化检测时,您的 getter 将被调用。 然后您的 getter 发出一个 http 请求,这会触发更改检测,从而调用您的 getter 等。
您传递给异步管道的roomList$
Observable 应该创建一次,可能在ngOnInit
。
所以你的content.ts
看起来像这样:
roomList$: Observable<RoomListType[]>;
ngOnInit() {
this.roomList$ = this.hotelService.getRoomList();
}
shareReplay在您的情况下似乎没有必要 - 如果您的 Observable 可能有延迟订阅者,他们应该在订阅后立即接收最后发出的值,而不必等待 Observable 再次发出,则使用这种方法。
如果你确实遇到过这种情况,你会更像这样配置它:
getRoomList() {
return this.roomList$.pipe(shareReplay(1));
}
而不是每次引用时都会触发新的 http 请求的 getter。
这是一个 StackBlitz ,您的基本场景不会触发无限循环。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.