TrackBy 函数的无限循环

Question

概览我正在学习 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 功能持开放态度。

Answer 1

idk 如果这会修复它，但您的 trackId 函数没有 returning 任何东西。给它加一个return！希望这对一些人有所帮助...

我不能发表评论所以我把这个作为答案

TrackBy 函数的无限循环

Infinite Loop on TrackBy function

typescript

jhipster

angular