【发布时间】：2019-03-02 01:23:47
【问题描述】：
概述 我正在学习 Angular 和 JHipster，我正在尝试获取集合中对象的 id。
我正在尝试使用 trackBy 获取 id，但我得到了一个无限循环
认为发生这种情况是因为每次迭代都会通过 ejecute 进行跟踪，但这很奇怪，因为该函数正在生成不同的对象集合
这是html组件
<ngb-panel *ngFor="let diagnosticoFoda of diagnosticoFodas;trackBy: trackId " >
这是 TS 组件
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
import { DiagnosticoFodaService } from 'app/entities/diagnostico-foda';
import { IPlanEstrategico } from 'app/shared/model/plan-estrategico.model';
import { IDiagnosticoFoda } from 'app/shared/model/diagnostico-foda.model';
import {IElementosDiagnosticoFoda} from 'app/shared/model/elementos-diagnostico-foda.model';
import { ElementosDiagnosticoFodaService } from 'app/entities/elementos-diagnostico-foda';
@Component({
selector: 'sigem-plan-estrategico-detail',
templateUrl: './plan-estrategico-detail.component.html'
})
export class PlanEstrategicoDetailComponent implements OnInit {
planEstrategico: IPlanEstrategico;
diagnosticoFodas: IDiagnosticoFoda[];
elementosDiagnosticoFodas : IElementosDiagnosticoFoda[];
elementosFodas: IDiagnosticoFoda[];
idPlan : number;
constructor(
private jhiAlertService: JhiAlertService,
private activatedRoute: ActivatedRoute,
private diagnosticoFodaService: DiagnosticoFodaService,
private elementosDiagnosticoFodaService : ElementosDiagnosticoFodaService) {}
ngOnInit() {
this.activatedRoute.data.subscribe(({ planEstrategico }) => {
this.planEstrategico = planEstrategico;
this.idPlan = planEstrategico.id;
this.cargarAnaliziFoda(this.idPlan);
});
}
previousState() {
window.history.back();
}
private onError(errorMessage: string) {
this.jhiAlertService.error(errorMessage, null, null);
}
cargarAnaliziFoda(id){
this.diagnosticoFodaService.findByPlan(id).subscribe(
(res: HttpResponse<IDiagnosticoFoda[]>) => {
this.diagnosticoFodas = res.body;
},
(res: HttpErrorResponse) => this.onError(res.message)
);
}
cargarElementosFoda(id_foda){
console.log('el id de este diagnostico foda es' + id_foda);
/*this.elementosDiagnosticoFodaService.findByFODA(id_foda).subscribe(
(res: HttpResponse<IElementosDiagnosticoFoda[]>) => {
this.elementosDiagnosticoFodas = res.body;
console.log(this.elementosDiagnosticoFodas);
},
(res: HttpErrorResponse) => this.onError(res.message)
);*/
}
trackId = (index: number, item: IDiagnosticoFoda) => {
this.cargarElementosFoda(item.id);
}
}
现在你可以看到我在 trackId 上调用的函数中评论了服务部分，当我这样做时我没有循环
这是我的控制台在完整代码中的样子：
永不停止。
但代码注释：
所以我只是想获取 id 来调用服务并获取 DOFA 分析的元素
- 注意事项
- 我对 Angular、TypeScript 和 Jhipster 非常陌生。
- 如果我错过了重要的内容，请在评论中告诉我 我会补充这个问题。
- 我只是想得到
diagnosticoFoda.id所以也许是一个更好的方法 该 trackBy 功能我愿意接受建议。
【问题讨论】：
-
您不应该在 trackBy 函数内部执行 HttpClient 调用。 trackBy 函数应该是一个相对简单的逻辑来返回对象的属性，该属性将反映该对象的“唯一”标识符。在该函数中创建一个 HttpClient 可能会导致巨大的性能问题，例如您当前所看到的。实际上，在该函数中，您最多应该只返回
diagnosticoFoda的属性。 -
如果目标是检索通过 HttpClient 调用检索到的对象的数组/集合，则有 RxJS 运算符，例如 forkJoin、mergeMap 和类似的，可以帮助解决这个问题。有答案显示执行多个 HttpClient 类，如stackoverflow.com/questions/45035184/…。话虽如此，您可以创建接收stackoverflow.com/questions/45035184/…` 的子组件，并在自己的
ngOnInit()中进行自己的调用以初始化/获取数据。 -
@AlexanderStaroselsky 谢谢，我正在寻找获取 id 并拨打电话的最佳方式。
标签： angular typescript jhipster