TrackBy功能上的无限循环

时间:2019-03-01 17:11:26

标签: angular typescript jhipster

概述 我正在学习Angular和JHipster,并且试图获取集合中对象的ID。

我正在尝试使用trackBy获取ID,但是我正在获得无限循环

认为发生这种情况是因为轨迹在每次迭代中都逐个射出,但是很奇怪,因为该函数正在生成不同的对象集合

这是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的函数中注释了服务方,当我这样做时,我没有循环

这是控制台上显示完整代码的人:

enter image description here

永不停止。

但代码已注释:

enter image description here

所以我只是想获取ID来调用服务并获取DOFA分析的元素

  • 注释
  • 我真的对Angular,TypeScript和Jhipster陌生。
  • 如果我错过了重要的事情,请在评论中让我知道 我将添加到这个问题。
  • 我只是想获取diagnosticoFoda.id,所以也许是更好的方法 该trackBy函数可以接受建议。

1 个答案:

答案 0 :(得分:1)

idk(如果可以解决),但是您的trackId函数未返回任何内容。添加退货!希望这对您有所帮助...

我无法发表评论,所以我将其作为答案