Angular Ngx Charts调用API赋值后图表空白，硬编码数据正常是什么原因？

问题根因 #

Ngx Charts 内部对results输入参数使用引用变更检测，只有当数组的内存引用发生变化时，才会触发图表重新渲染。你当前的代码是调用push方法往已有的popularCountriesData数组中追加元素，数组本身的引用没有改变，因此组件无法感知到数据更新，最终显示空白。
硬编码赋值时是直接替换了整个数组的引用，所以能正常触发渲染。

解决方案 #

方法1：替换整个数组引用（推荐） #

不要用push追加元素，先在本地构造好完整的结果数组，再直接赋值给popularCountriesData触发引用更新，修改后的getData方法如下：

private getData() {
    this.researcherService.restGetStatisticsCountry().subscribe((data: PostCollection[]) => {
            // 先通过map构造完整的新数组
            const newData = data.map(item => ({
                name: item.name,
                value: item.posts.length
            }));
            // 直接赋值替换原有数组的引用
            this.popularCountriesData = newData;
        },
        (err: HttpErrorResponse) => {
            console.log(err.error);
        });
}

方法2：扩展运算符触发引用更新 #

如果业务场景需要保留原有数组内容、仅追加新数据，可以在所有push操作执行完成后，用扩展运算符生成新数组后赋值：

// 原有push逻辑执行完成后新增一行代码更新引用
this.popularCountriesData = [...this.popularCountriesData];

补充最佳实践：Angular 不建议在构造函数中执行异步数据请求，建议将getData()的调用移到ngOnInit生命周期钩子中，避免组件初始化阶段出现不可预期的副作用。

内容的提问来源于stack exchange，提问作者A. Vreeswijk