Angular中如何将@Input接收的父组件数据正确渲染到HTML模板

出现报错的核心原因是：你在@Input中定义的setter仅接收了入参，没有将入参赋值给子组件类的实例属性，模板中绑定的user指向的是类的成员属性而非setter的入参，因此始终为undefined。

你可以选择以下任意一种方案修复：

• 方案1：保留setter逻辑，补充配套的属性存储与getter
  如果你需要在赋值user时做额外的拦截处理，可按如下代码修改：

  // user-profile.ts
  // 定义内部变量存储user实际值
  private _user: any = {};
  
  @Input('user')
  set user(user: any) {
    this._user = user;
    // 你原有需要在赋值时执行的逻辑可以写在这里
  }
  // 对外暴露getter，供模板访问user值
  get user(): any {
    return this._user;
  }
  

• 方案2：无需拦截赋值逻辑时直接简化为普通@Input
  如果你不需要在user赋值时执行额外逻辑，直接删除setter写法即可：

  @Input() user: any = {};
  

额外优化建议 #

你也可以在模板中使用可选链语法，进一步避免属性未定义的报错：

<h1>
  {{ user?.name }}
</h1>

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