“ngFor en un componente de terceros entra en un bucle”
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.
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:trackBy
en su bucle*ngFor
para mejorar el rendimiento:*ngFor
.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.