Angular 5中HTTP响应无法映射为接口类型的问题排查

嘿，这个问题我太熟了！其实和你用NewsItem接口转换HTTP响应一点关系都没有——核心原因是HTTP请求是异步操作：

当组件初始化完成、HTML开始渲染的时候，你的getCategoryNews()请求还在后台跑，newsData此时还是默认的undefined。这时候模板里直接访问newsData.articles，就会因为newsData不存在而抛出"Cannot read property 'articles' of undefined"的错误。

你在subscribe里能正常打印newsData，是因为那时候请求已经完成、数据已经赋值了，但这一步发生在HTML首次渲染之后。

1. 用可选链操作符（最简洁，Angular 9+支持） #

在模板里给属性访问加上?.，它会自动判断前面的对象是否存在，不存在就停止后续访问，不会报错：

<div *ngFor="let item of newsData?.articles">
  {{item.description}}
</div>

2. 用*ngIf先兜底判断 #

通过*ngIf确保只有当newsData有值时，才渲染遍历articles的DOM：

<div *ngIf="newsData">
  <div *ngFor="let item of newsData.articles">
    {{item.description}}
  </div>
</div>

3. 给newsData初始化默认值 #

在组件类里提前给newsData设置一个符合NewsItem接口的默认对象，这样即使请求没完成，newsData.articles至少是个空数组，不会触发报错：

export class NewsContainerComponent implements OnInit {
  // 初始化默认值，保证articles始终是数组类型
  newsData: NewsItem = { status: '', totalResults: 0, articles: [] };
  
  constructor(private _newsService: NewsService) {}

  ngOnInit() {
    this._newsService.getCategoryNews().subscribe(
      (response) => {
        this.newsData = response;
        console.log(this.newsData);
      },
      (err) => {
        console.error(err);
      }
    )
  }
}

4. 用async管道（最优雅的异步处理方式） #

async管道会帮你自动管理订阅、取消订阅，还能简化代码：

• 组件类里直接把请求返回的Observable赋值给成员变量：

export class NewsContainerComponent implements OnInit {
  newsData$: Observable<NewsItem>;
  
  constructor(private _newsService: NewsService) {}

  ngOnInit() {
    this.newsData$ = this._newsService.getCategoryNews();
  }
}

• 模板里用async管道订阅并获取数据：

<div *ngIf="newsData$ | async as newsData">
  <div *ngFor="let item of newsData.articles">
    {{item.description}}
  </div>
</div>

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