Angular中@Input()值为undefined的问题排查

你的问题出在父组件模板中子组件的属性绑定写法错误：

你当前把[memos]="test"放在了<app-test-grid>标签的内部内容区域，这属于Angular的内容投影（Content Projection）用法，而非输入属性绑定逻辑。子组件的@Input()根本无法接收到这个值，所以memos始终是undefined。

正确写法 #

将属性绑定直接写在组件标签上：

<div *ngIf="checker()">
  THIS IS DISPLAYED
  <app-test-grid [memos]="test"></app-test-grid>
</div>

额外验证点 #

1. 确保TestGridComponent已在父组件所属模块中声明，或通过导入的模块导出。
2. 若后续涉及异步数据，可在子组件中用ngOnChanges钩子监听输入属性变化，或结合async管道处理Observable类型的输入。

修改后，子组件ngOnInit中就能正确打印出memos的值了。

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