Angular如何解决属性未初始化报错并在模板展示接口数据

报错原因说明 #

你遇到的Property 'todo' has no initializer and is not definitely assigned in the constructor.是TypeScript开启严格属性初始化校验时的常规提示：TS要求类属性必须在构造函数执行结束前完成赋值，而你的todo属性既没有设置初始值，也没有在构造函数内赋值，仅在异步执行的ngOnInit生命周期里等接口返回后才赋值，TS静态扫描识别不到这个异步赋值路径，就会抛出编译错误。

问题1：解决属性未初始化的编译报错 #

优先选下面3种类型安全的写法，不建议直接关闭TS校验规则：

• 非空断言方案：在属性名后加!，明确告诉TS你保证这个属性会在使用前完成赋值

  // 替换原来的todo:Product;写法
  todo!: Product;
  

  适合你确定接口正常返回、数据会在模板渲染前完成赋值的场景。
• 初始值兜底方案：给属性设置符合接口结构的默认初始值，这是最稳妥的写法

  todo: Product = {
    id: 0
  };
  

  初始值会在组件实例化时就完成赋值，从根源上通过TS校验，同时避免首次渲染时空值问题。
• 联合类型方案：明确标记属性可能为空

  todo: Product | undefined;
  

  这种写法需要你在所有读取todo属性的地方做空值判断，适合接口可能返回空、需要单独处理无数据状态的场景。

问题2：正确在模板中展示接口返回数据 #

接口请求是异步行为，组件首次执行渲染时，接口数据大概率还没返回，直接写{{todo.id}}很容易触发「读取undefined上的id属性」的运行时报错，按你选的属性声明方式对应处理即可：

• 如果用了非空断言或者设置了初始值：在模板里用Angular内置的安全导航操作符?做空值保护，即使todo暂时为空也不会抛错

  <!-- 组件模板对应位置 -->
  <p>商品ID：{{todo?.id}}</p>
  

• 如果用了undefined联合类型声明：除了安全导航操作符，还可以用*ngIf控制内容渲染时机，等数据返回后再渲染对应区块

  <div *ngIf="todo">
    <p>商品ID：{{todo.id}}</p>
    <!-- 其他todo相关的模板内容都放在这个区块里即可 -->
  </div>
  <!-- 可以加个加载提示提升体验 -->
  <p *ngIf="!todo">数据加载中...</p>
  

额外注意：要确保ApiService中getApi()方法的返回类型是Observable<Product>，这样TS才能正确推断订阅回调里data的类型，避免出现隐式any的类型问题。

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