异步数据传递至子组件引发渲染异常问题排查

核心问题 #

你遇到的渲染不稳定问题，主要源于两个关键点：

• Angular变更检测对数组**内部元素修改（如splice）**不敏感：数组引用未发生变化时，Angular可能不会触发视图更新，导致模板里的chartData[i]仍为旧的空值，从而进入else分支。
• currentIndex与ngFor循环的i可能存在错位：如果点击元素时记录的索引不准确，会导致更新数组中错误的位置，当前循环的i对应位置仍无数据。

具体修复步骤 #

1. 用不可变方式更新数组，强制触发变更检测 #

不要用splice修改原数组，而是创建新数组替换旧数组，让Angular能立即感知到数组变化：

// 替换原有的splice代码
this.chartData = [
  ...this.chartData.slice(0, this.currentIndex),
  chartData,
  ...this.chartData.slice(this.currentIndex + 1)
];

这种方式生成新的数组实例，Angular的变更检测机制会同步更新视图中的chartData[i]值。

2. 确保currentIndex与ngFor的i严格对应 #

在点击元素展开时，必须把当前ngFor循环的i赋值给currentIndex，示例如下：

<!-- 假设你的ngFor结构 -->
<div *ngFor="let template of templates; let i = index" (click)="handleExpand(template, i)">
  <!-- 元素内容 -->
</div>

handleExpand(template: any, index: number) {
  this.currentIndex = index;
  // 后续展开、请求逻辑
}

避免因索引记录错误，导致更新数组中无关位置的数据，当前需要渲染的chartData[i]仍为空。

3. 增强子组件的数据监听（可选） #

在app-sankey组件中添加输入属性的setter，确保数据到来时重新初始化图表：

@Component({
  selector: 'app-sankey',
  templateUrl: './sankey.component.html'
})
export class SankeyComponent {
  private _data: any;

  @Input() set data(value: any) {
    this._data = value;
    if (value) {
      // 重新执行图表初始化逻辑
      this.initSankeyChart();
    }
  }

  get data(): any {
    return this._data;
  }

  private initSankeyChart() {
    // 你的图表渲染代码
  }
}

也可以用ngOnChanges钩子监听数据变化：

ngOnChanges(changes: SimpleChanges) {
  if (changes['data'] && changes['data'].currentValue) {
    this.initSankeyChart();
  }
}

4. 额外检查：避免buildData返回空值 #

如果result.properties.files?.['template.json'].definition不存在，buildData可能返回null或undefined，此时可以给chartData[i]设置默认空结构，避免进入else分支：

chartData = this.sankeyDiagramLogicService.buildData(data) || { nodes: [], links: [] }; // 按图表所需结构设置默认值

内容的提问来源于stack exchange，提问作者1zz0