Блог

В моем компоненте у меня есть 6 диаграмм, которые я отображаю через ngFor, и данные, которые я получаю из Firebase, позвольте мне показать вам:

component.html

 <div style="width: 550px; border-radius: 8px;"
         class="animacion mb-5 mat-elevation-z7 animate__animated animate__fadeInRight"
         [ngClass]="'animate__delay-' i 's'" *ngFor="let gerencia of arregloGerencias; let i = index">
            <div class="text-center mt-3">
                <h4>{{gerencia.nombre | titlecase}}</h4>

            </div>
            <hr>
            <canvas class="mb-5" baseChart (chartClick)="chartClicked($event)"
            [data]="arregloGrafico[i]" [labels]=" polarAreaChartLabels"
            [legend]="polarAreaLegend " [chartType]="polarAreaChartType ">

            </canvas>
        </div>
 

компонент.ts

 for ( let i = 0; i < this.arregloGerencias.length; i  ) {
                  let contadorListo = 0;
                  let contadorNoListo = 0;
                  for (let j = 0; j < arregloFinal.length; j  ) {
                    if (arregloFinal[j].areaAux.gerencia == this.arregloGerencias[i].nombre) {
                      if (arregloFinal[j].marcador) {
                        contadorListo   
                      } else  {
                        contadorNoListo   
                      }
                    }
                  }
                  this.arregloGrafico.push([contadorListo, contadorNoListo]);
                  
                }
 

Я использую и массив массивов чисел, чтобы получить данные каждой отображаемой диаграммы, как вы можете видеть в части canvas [data]=»arregloGrafico[i]», и вот что у меня есть:

Как вы можете видеть, он правильно отображает только последние две диаграммы, и я не знаю, почему это происходит. Что я понял, так это то, что вывод верен, но последние два массива показывают разные:

Пожалуйста, помогите !!