Angular父组件向子组件传值失败，firstName值无法正常渲染显示

问题原因 #

父组件模板中app-cards的输入属性绑定位置错误：属性绑定语法需要写在组件的开始标签<app-cards>内部，你当前将[firstName]="firstName"写在了开闭标签的内容插槽区域，Angular不会将其识别为子组件的输入绑定，因此子组件的firstName始终为默认值undefined，渲染时无内容展示。

解决方案 #

仅需修改app.component.html的代码即可，修正后代码如下：

<app-cards [firstName]="firstName"></app-cards>

其余代码无需调整，修改后重新运行项目即可正常渲染出First Name: John的效果。如果需要避免未传值时的空值展示，也可以给子组件的输入属性设置默认值：

@Input() firstName : string = '';

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