Angular属性HTML渲染正常但控制台报ctx.detailNews.created未定义

报错原因 #

这个报错是异步请求时序问题导致的：
你初始化时给detailNews赋值的是空对象{}，HTTP请求是异步的，模板第一次渲染的时候接口还没返回数据，此时detailNews.created根本不存在，访问created[0]就会抛出类型错误。等接口请求成功给detailNews赋值后，模板触发重新渲染，就能正常拿到值显示，所以你能看到渲染结果但控制台有报错。

解决方法 #

方法1：使用可选链操作符（推荐，Angular 12+原生支持） #

直接在模板访问属性前加?，遇到空值就会自动终止访问不会报错，修改模板代码为：

{{ detailNews?.created?.[0]?.value }}

方法2：用*ngIf提前判断值存在再渲染 #

给需要用到detailNews的内容加判断，只有属性存在时才渲染对应节点：

<ng-container *ngIf="detailNews?.created?.length">
  {{ detailNews.created[0].value }}
</ng-container>

方法3：给detailNews设置符合结构的初始值 #

组件里初始化时直接给detailNews加上created空数组的结构，避免访问时报错：

// 把原来的 detailNews: any = {} 改成
detailNews: any = { created: [] }

方法4：使用Async管道简化处理 #

不用手动订阅observable，Async管道会自动管理订阅和销毁，还能避免空值问题：
组件代码修改：

// 新增属性
detailNews$!: Observable<INewsDetail>;

ngOnInit(): void {
  this.activatedRoute.queryParams.subscribe(params => {
    // 拿到ID后再发起请求，避免ID为空的问题
    this.detailNews$ = this.newsService.getNewsDetail(params.id);
  });
}

模板代码修改：

{{ (detailNews$ | async)?.created?.[0]?.value }}

额外优化提示 #

你现有代码里还有一个隐藏问题：getNewsDetail()的调用放在了queryParams订阅外面，有可能出现请求发起时还没拿到路由ID的情况，建议把getNewsDetail()移到queryParams的订阅回调里，拿到ID后再发起请求。

内容的提问来源于stack exchange，提问作者Ricardo Castañeda