Angular进行两次http调用

我正在开发一个角度应用程序。 我有一个自定义数据源，它从服务器获取数据并填充material表

以下是来自服务的方法：

dataChange:BehaviorSubject=newbehaviorsubject（[]）；
getSegmentsByProgramId（程序ID:编号）{
this.subscription=this.httpClient
.get（`${environment.baseUrl}/segment/program/${programId}`）
.订阅(
分段=>{
this.dataChange.next（段）；
},
（错误：HttpErrorResponse）=>{
console.log（错误消息）；
},
（）=>console.log（'completed'）
);
}

以下是父组件的模板：

部分
{{program.name}

以下是父组件的.ts：

导出类SegmentListComponent实现OnInit{
程序$：可观察；
成员$：可见；
@Output（）createSegmentEvent=新的EventEmitter（）；
构造函数（私有programService:programService，私有membersService:membersService）{}
恩戈尼尼特（）{
this.programs$=this.programService.programs$；
this.members$=this.membersService.members$.pipe（映射（members=>members.length））；
}
createSegment（）{
this.createSegmentEvent.next（true）；
}
}

在儿童ts中：

导出类SegmentTableComponent实现OnInit{
segmentsDatabase:SegmentsService | null；
数据源：SegmentsDataSource |空；
displayedColumns=['name'，'startDate'，'endDate'，'cashback'，'strategy'，'status'，'members'，'actions']；
指标：数量；
id：编号；
isLoading=true；
@Input（）programId:number | any；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
@ViewChild（MatSort，{static:true}）sort:MatSort；
@ViewChild（'filter'，{static:true}）filter:ElementRef；
构造函数（公共httpClient:httpClient，私有segmentsService:segmentsService，公共对话框：MatDialog）{}
恩戈尼尼特（）{
this.loadData（this.programId）；
}
公共加载数据（程序ID:number | any）{
this.segmentsDatabase=新的分段服务（this.httpClient）；
this.dataSource=new SegmentsDataSource（this.segmentsDatabase，this.paginator，this.sort，programId）；
fromEvent（this.filter.nativeElement，'keyup'）
.pipe（去BounceTime（150），distinctUntilChanged（））
.订阅（（）=>{
如果（！this.dataSource）{
返回；
}
this.dataSource.filter=this.filter.nativeElement.value；
});
}
}

下面是数据源：

导出类段数据源扩展数据源{
_filterChange=新行为主体（“”）；
获取筛选器（）：字符串{
返回此值。\u filterChange.value；
}
设置过滤器（过滤器：字符串）{
this.\u filterChange.next（过滤器）；
}
filteredData:段[]=[]；
RenderData:段[]=[]；
建造师(
公共部门数据库：部门服务，
公共签名者：MatPaginator，
公共类：MatSort，
public _programId:number | any
) {
超级（）；
this._filterChange.subscribe（（）=>（this._paginator.pageIndex=0））；
}
connect（）：可观察{
const displayDataChanges=[
此._segmentsDataBase.dataChange，
这个，
这个.\u过滤器更换，
这是_paginator.page，
这是程序ID
];
this.\u segmentsDataBase.getSegmentsByProgramId（this.\u programId）；
返回合并（…displayDataChanges）.pipe(
地图（（）=>{
this.filteredData=this.\u segmentsDataBase.data.slice（）.filter（（段：段）=>{
常量searchStr=(
段名称+
起始日期+
段.结束日期+
A.现金返还+
第1段.地位
).toLowerCase（）；
返回searchStr.indexOf（this.filter.toLowerCase（））！=-1；
});
const sortedData=this.sortData（this.filteredData.slice（））；
const startIndex=this.\u paginator.pageIndex*this.\u paginator.pageSize；
this.renderdata=sortedData.splice（startIndex，this.\u paginator.pageSize）；
返回此.renderData；
})
);
}
断开连接（）{}
}

当我在这个页面上并重新加载它时，一切正常。服务被调用一次。 但当我从另一页转到另一页时。。。我的服务器被调用了两次

我不知道是什么导致了这个问题。。。

---

也许有人能帮我解决这个问题。

最好在this.httpClient-request中使用管道，以获得异步结果。Evtl。当您传输到另一个站点时，您在错误情况下运行，angular的重试选项将重试该请求

例如：

getHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get<Hero>(url).pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
  );
}

getHero（id:number）：可观察{
常量url=`${this.heroesUrl}/${id}`；
返回此.http.get（url）.pipe(
点击（=>this.log（`fetched hero id=${id}`）），
catchError（this.handleError（`getHero id=${id}`））
);
}

---

这里有一个

我们需要一个@Liam，我已经添加了一些额外的代码片段，感谢这个想法。。。问题出在重试选项中。我已经解决了。