Angular父传子组件：Convention对象模板可显ID，代码调用却为Undefined

这种情况我之前开发Angular项目时也碰到过，核心原因基本都是数据异步加载或者引用类型的变更检测特性导致的——父组件里的Convention对象大概率是通过API请求、Promise这类异步操作获取的，子组件初始化时这个对象还没被赋值，所以打印出来是undefined；但模板里用{{ convention.id }}时，Angular的自动变更检测会在对象加载完成后更新视图，所以能正常显示ID。

下面给你几个可行的解决方案，按需选择：

1. 用ngOnChanges监听输入属性的变化 #

ngOnChanges会在输入属性变化时触发，但要注意：第一次触发时convention可能还是undefined，所以必须判断当前值是否存在：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Convention } from './your-convention-type-path';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnChanges {
  @Input() convention: Convention;

  ngOnChanges(changes: SimpleChanges): void {
    // 检查convention属性是否变化，且当前值不为空
    if (changes['convention'] && changes['convention'].currentValue) {
      console.log('完整的Convention对象:', changes['convention'].currentValue);
    }
  }
}

2. 给@Input属性添加setter监听 #

这种方式比ngOnChanges更直观，只要父组件传递的convention有值，setter就会立即触发：

import { Component, Input } from '@angular/core';
import { Convention } from './your-convention-type-path';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  private _convention: Convention;

  @Input() set convention(value: Convention) {
    this._convention = value;
    // 确保值存在时再打印
    if (value) {
      console.log('完整的Convention对象:', this._convention);
    }
  }

  get convention(): Convention {
    return this._convention;
  }
}

3. 用*ngIf确保子组件在对象加载后再渲染 #

如果你的业务场景不需要处理convention后续的变更，可以在父组件模板里给子组件加*ngIf，确保convention有值时才渲染子组件：

<!-- 父组件模板 -->
<app-child [convention]="convention" *ngIf="convention"></app-child>

这样子组件初始化时convention已经是完整的对象，直接在ngOnInit里打印即可：

import { Component, Input, OnInit } from '@angular/core';
import { Convention } from './your-convention-type-path';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  @Input() convention: Convention;

  ngOnInit(): void {
    console.log('完整的Convention对象:', this.convention);
  }
}

补充说明：为什么传ID时ngOnChanges能正常工作？ #

因为ID是基本数据类型（number/string），父组件里ID赋值后会立即触发子组件的ngOnChanges；而Convention是引用类型，只有当对象的引用发生变化（比如重新赋值一个新对象）时，ngOnChanges才会触发。如果只是修改现有Convention对象的属性，ngOnChanges不会触发，但模板会因为Angular的变更检测自动更新。

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