Infinite Loop on TrackBy function

Question

Overview I'm learning Angular and JHipster, and I'm trying to get the id of an object in a collection.

I'm trying to get the id using trackBy but im getting a infinity loop

think this is happen because the track by ejecute on each iteration but its strange because the function is generation a different object collection

This is the html component

<ngb-panel  *ngFor="let diagnosticoFoda of diagnosticoFodas;trackBy: trackId " >

And this is the TS component

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); 
    }


}

now like you can see I commented the service parte inside the function im calling on the trackId and when I do that I don't have the loop

This is who my console look with the full code:

and never stop.

but with the code commented:

so i just trying to get the id to call the service and get the elements of the DOFA analysis

Notes
I'm really new on Angular, TypeScript, and Jhipster.
Please if I missed something important, let me know on the comment and I will added to the question.
Im just trying to get the diagnosticoFoda.id so maybe is a better way that trackBy function im open to suggestions.

You should not be executing an HttpClient call inside of the trackBy function. trackBy function should be relatively simple logic to return a property of the object that would reflect the "unique" identifier for that object. Making an HttpClient inside that function could cause immense performance issues such as what you're seeing currently. Really at most in that function you should just be returning a property of `diagnosticoFoda`. — Alexander Staroselsky, Mar 01 '19 at 17:17
If the goal is to retrieve an array/collection of objects that are retrieved via an HttpClient call there are RxJS operators such as forkJoin, mergeMap, and similar that can help with this. There are answers that show executing multiple HttpClient class like https://stackoverflow.com/questions/45035184/chaining-http-calls-in-angular-2-in-a-for-loop. That being said, you could creating child components that take in the https://stackoverflow.com/questions/45035184/chaining-http-calls-in-angular-2-in-a-for-loop` and make their own calls within their own `ngOnInit()` to initialize/get data. — Alexander Staroselsky, Mar 01 '19 at 17:28
@AlexanderStaroselsky thank you, im looking the best way to get the id and make the call. — Misael Landeros, Mar 01 '19 at 18:24

score 1 · Accepted Answer · answered Mar 01 '19 at 17:18

1

idk if this will fix it, but your trackId function is not returning anything. Add a return to it! hope this helps some...

I can't comment so I put this as an answer

answered Mar 01 '19 at 17:18

Francisco Santorelli

1,243
8
13

thank you!, that partiality fixed the problem but Im calling a https service to get the elements by that id and then I think because the two ways binding angular detects the new data and reload all again maybe that's why I have the loop. – Misael Landeros Mar 01 '19 at 18:32

Infinite Loop on TrackBy function

1 Answers1