Angular:Observable多次执行请求

Question

我正在使用observable

服务

getMembers(): Observable<any[]> {
return this._http.get('http://localhost/membership/main/getUsers')
  .map(response => response.json() );
}

零件

members$: Observable<any[]>;
ngOnInit() {
 this.members$ = this._membersService.getMembers()
}

要求

-getUsers
-getUsers

两者都返回相同的JSON数据

每次加载页面时,它都会返回重复的请求.这不是关于冷热要求.因为两个请求都返回相同的响应.但是当我删除了observable时,一切都还可以.只有一个请求

Answer 1

我猜你async在模板的两个不同的地方使用管道.为避免重新执行请求,您可以使用share运算符

import 'rxjs/add/operator/share';

members$: Observable<any[]>;
// I personally prefer to set observables in ctor
constructor() {
 this.members$ = this._membersService.getMembers().share();
}

有关运营商的更多信息,请点击此处

另一种方法是async在以下的帮助下在一个地方使用管道ng-container:

//template
<ng-container *ngIf="members$ | async as members">
   <span *ngIf="members.length === 0; else showMembers">No members!</span>
   <ng-template #showMembers>
     <div *ngFor="let member of members">{{member | json}}</div>
   </ng-template>
</ng-container>