Tengo un problema. Estoy tratando de llenar mis gráficos con datos reales de mi API. Para ello tengo el siguiente html:

 <ngx-charts-bar-vertical [results]="popularCountriesData" [legend]="false" [showXAxisLabel]="false" [showYAxisLabel]="false" [xAxis]="true" [yAxis]="false" [gradient]="false"> </ngx-charts-bar-vertical>

Y mi archivo mecanografiado es:

 import {Component, OnInit} from '@angular/core'; import {ResearcherService} from "../../../services/researcher.service"; import {HttpErrorResponse} from "@angular/common/http"; import {PostCollection} from "../../../models/PostCollection"; @Component({ selector: 'app-dashboard-custom', templateUrl: './dashboard-custom.component.html', styleUrls: ['./dashboard-custom.component.css'] }) export class DashboardCustomComponent implements OnInit { popularCountriesData: any = []; constructor(private researcherService: ResearcherService) { this.getData(); } private getData() { this.researcherService.restGetStatisticsCountry().subscribe((data: PostCollection[]) => { for (let i = 0; i < data.length; i++) this.popularCountriesData.push({ name: data[i].name, value: data[i].posts.length }); console.log(this.popularCountriesData) }, (err: HttpErrorResponse) => { console.log(err.error); }); } ngOnInit(): void { } }

Cuando ejecuto este código, mi gráfico está vacío, mientras que puedo ver en el registro de la consola:

 [ { "name": "Japan", "value": 1 }, { "name": "Russia", "value": 1 }, { "name": "Netherlands", "value": 8 } ]

Si copio estos datos y los codifico en el archivo mecanografiado de esta manera:

 popularCountriesData = [ { "name": "Japan", "value": 1 }, { "name": "Russia", "value": 1 }, { "name": "Netherlands", "value": 8 } ];

El gráfico tiene un resultado:

¿Qué estoy haciendo mal?