Angular13中HTML模板无法显示config对象属性报TS2339如何解决

• 你声明的config类型为{ [key: string]: string | Date } | null，初始值设为null，且config是在setTimeout中延迟500ms才完成赋值。模板渲染启动时config仍为null，直接访问title等属性会触发空值访问错误。
• Angular的模板严格类型检查会识别到config存在为null的可能性，直接访问属性不符合类型安全要求，因此抛出TS2339错误。

以下三种方案均可解决问题，可根据实际场景选择：

方案1：模板使用可选链操作符（改动手最少，推荐） #

Angular 12及以上版本原生支持模板中使用可选链?.，直接修改模板中所有config属性访问的写法即可：

<span class="brand-logo center">{{config?.title}}</span>

<!-- 页脚部分修改为如下 -->
{{config?.date}}
{{config?.footer}}

可选链会自动判断config是否为null/undefined，有值时才会访问后续属性，无值时返回undefined，不会抛出错误。

方案2：调整config初始值与类型 #

修改组件中config的声明，移除null类型、设置初始值为空对象：

// 组件中修改config声明
config: { [key: string]: string | Date } = {};

此时config初始为对象，访问不存在的属性只会返回undefined，不会触发空值访问错误。

方案3：通过*ngIf控制渲染时机 #

将用到config的模板内容用*ngIf包裹，仅当config有值时才渲染对应模块：

<div class="container" *ngIf="config">
  <!-- 原有所有模板内容保持不变，可直接访问config.title等属性 -->
</div>

config为null时内部内容不会渲染，自然不会触发属性访问错误。

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