es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

“ngFor en un componente de terceros entra en un bucle”

18 Jun, 2023 Programación

Estoy desarrollando una webApp Angular, usando algunos componentes de terceros para mostrar datos.
En este caso específico, estoy utilizando un componente que puede mostrar múltiples series de puntos en un solo objeto de gráfico.

Este es mi código:

<div class="e-panel-header">
    <h6>{{Widget.Properties.Title}}</h6>
</div>
<div class="e-panel-content d-flex" [ngstyle]="{'width': width, 'height': height}">
    <ejs-chart #chart="" id="chart-container" [primaryxaxis]='primaryXAxis' [width]="width"> 
        <e-series-collection>
            <e-series *ngfor="let serie of Values; let i = index" [datasource]="serie.DetailValues" type="Line" xname="DateTime" yname="Value" name="{{serie.Id}}">
            </e-series>
        </e-series-collection>
    </ejs-chart>
</div>

El problema es que cuando intento crear una serie utilizando la directiva *ngFor, ciclando el array donde he almacenado todos mis datos, entra en un bucle y el navegador (Firefox) me da un bonito

ERROR InternalError: too much recursion
_loop ej2-base.es2015.js:166
_loop ej2-base.es2015.js:165
extend ej2-base.es2015.js:160
_loop ej2-base.es2015.js:184
_loop ej2-base.es2015.js:165
extend ej2-base.es2015.js:160
_loop ej2-base.es2015.js:178
_loop ej2-base.es2015.js:165
extend ej2-base.es2015.js:160

Obviamente, si creo el componente <e-series> manualmente para cada elemento de valores, todo funciona bien.

¿Cuál puede ser el problema? Me está volviendo loco.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema parece estar causado por un bucle infinito al usar la directiva *ngFor dentro del componente <e-series>. Puede intentar las siguientes soluciones para solucionar este problema:

    1. Utilice una función trackBy en su bucle *ngFor para mejorar el rendimiento: 
      <e-series *ngfor="let serie of Values; let i = index; trackBy: trackByFn" [datasource]="serie.DetailValues" type="Line" xname="DateTime" yname="Value" name="{{serie.Id}}">
</e-series>

trackByFn(index: number, serie: any): number {
 return serie.Id;
}
    2. Use otro componente o librería que pueda manejar la exhibición de múltiples series de puntos en un único objeto gráfico sin la necesidad de la directiva *ngFor.

    3. Compruebe si existen referencias circulares en sus datos que podrían estar causando el bucle infinito y resuélvalos si es necesario.

    ¡Espero que esto les ayude! Avísenme si tienen alguna otra pregunta.

Comments are closed.