Angular类内声明的array在ngOnInit赋值后HTML调用为空如何解决

问题排查及解决方法 #

• 优先检查chartdata的赋值时机
  绝大多数这类问题都是因为chartdata是异步请求（比如后端接口返回）的数据，ngOnInit执行时接口请求还未返回，chartdata此时为空值，处理后自然得到空数组。
  解决方法：将数组赋值逻辑移到chartdata的异步回调中执行，示例如下：

  // 假设你通过HttpClient请求接口获取chartdata
  this.http.get<你的数据类型>('接口地址').subscribe(res => {
    this.chartdata = res;
    // 拿到数据后再处理赋值
    this.array = _.without(_.uniq(this.chartdata.map(x => x.ww)), null);
  })
  

• 检查组件变化检测策略
  如果你的组件设置了changeDetection: ChangeDetectionStrategy.OnPush，数组赋值后可能没有触发视图更新，需要手动触发变化检测：

  // 首先导入并注入ChangeDetectorRef
  import { ChangeDetectorRef } from '@angular/core';
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 数组赋值后加一行
  this.array = _.without(_.uniq(this.chartdata.map(x => x.ww)), null);
  this.cdr.detectChanges();
  

• 排查Lodash处理逻辑是否符合预期
  可以在赋值前加日志逐段校验输出，排除数据本身的问题：

  console.log('原始chartdata：', this.chartdata);
  const wwList = this.chartdata.map(x => x.ww);
  console.log('提取的ww列表：', wwList);
  const uniqList = _.uniq(wwList);
  console.log('去重后列表：', uniqList);
  const finalList = _.without(uniqList, null);
  console.log('最终数组：', finalList);
  this.array = finalList;
  

  检查是否存在所有ww字段都是null、或者chartdata结构不符合预期的情况。
• 修复ng-select的属性写法（可选优化）
  你当前代码里multiple="true"是字符串赋值，建议改成属性绑定[multiple]="true"，避免后续多选功能出现异常。

内容的提问来源于stack exchange，提问作者Simon Chang