Angular组件传值异常：graphData已赋值子组件却获undefined

核心原因 #

• 生命周期执行时序问题：父组件和子组件的ngOnInit会在组件初始化阶段几乎同时触发。但父组件的loadBarchart是异步请求，当子组件执行ngOnInit时，后端数据还没返回，graphData还处于初始的undefined状态，因此子组件接收的items也是undefined。后续父组件拿到数据更新graphData时，子组件的ngOnInit不会再次执行，所以之前的打印结果始终是undefined。
• 双向绑定的更新时机：[(items)]双向绑定会在父组件graphData变化时同步更新子组件的items，但这个更新动作发生在子组件ngOnInit执行之后，所以初始化阶段无法获取到有效数据。

解决方法 #

方法1：使用ngOnChanges监听数据变化 #

在子组件中改用ngOnChanges钩子监听items的变化，每次数据更新都会触发该钩子，此时可以拿到最新值：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-dashboard-horizontal-barchart',
  templateUrl: './dashboard-horizontal-barchart.component.html',
  styleUrls: ['./dashboard-horizontal-barchart.component.css']
})
export class DashboardHorizontalBarchartComponent implements OnChanges {
  @Input() items: any;

  ngOnChanges(changes: SimpleChanges) {
    // 检查items是否有变化且当前值有效
    if (changes['items'] && changes['items'].currentValue) {
      console.log('更新后的items:', changes['items'].currentValue);
      // 在这里执行图表渲染等逻辑
    }
  }
}

方法2：用*ngIf延迟子组件渲染 #

在父组件模板中，通过*ngIf判断graphData是否存在，只有当数据加载完成后才渲染子组件。这样子组件初始化时，items已经是有效数据：

<app-dashboard-horizontal-barchart 
  *ngIf="graphData" 
  [(items)]="graphData"
></app-dashboard-horizontal-barchart>

方法3：结合AsyncPipe处理异步数据流（推荐） #

如果父组件的loadBarchart返回的是Observable，可以直接将其作为数据流传递给子组件，配合AsyncPipe自动处理异步订阅和数据更新：

1. 父组件中直接保留Observable：

graphData$ = this.loadBarchart(); // 假设loadBarchart返回Observable<any>

2. 父组件模板中使用AsyncPipe：

<app-dashboard-horizontal-barchart 
  [items]="graphData$ | async"
  (itemsChange)="graphData$ = $event" <!-- 如果需要双向绑定的更新逻辑 -->
></app-dashboard-horizontal-barchart>

这种方式无需手动管理订阅，Angular会自动处理数据更新，子组件可以在ngOnInit或ngOnChanges中获取有效数据。

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