无法将 HTTP 响应映射到角度 5 中的接口类型

Question

我正在调用 HTTP 请求，并在服务中使用接口将接收到的响应类型转换为所需类型。 HTTP 响应是一个带有一些键值对项的 JSON 对象。我已经在一个组件中订阅了该服务。当我控制台记录订阅函数中收到的响应时，它会使用键值对完美地记录对象。但是当我将该对象分配给组件类成员时，它似乎没有被强制转换为所需的接口类型。因为当我在组件 html 中使用类成员变量键时，我得到错误 - 'Cannot read property 'X' of undefined'

这里是代码 sn-ps -

界面

export interface NewsItem {
    status: string;
    totalResults: number;
    articles: any[];
}

服务

export class NewsService {
    constructor(private http: HttpClient) {}
    getCategoryNews(): Observable<NewsItem>{
        return this.http.get<NewsItem>(newsUrl);
    }
}

组件.ts

export class NewsContainerComponent implements OnInit {
newsData: NewsItem;
constructor(private _newsService: NewsService) {}
ngOnInit() {
        this._newsService.getCategoryNews().subscribe(
            (response) => {
                this.newsData = response;
                console.log(this.newsData);
            },
            (err) => {
                console.error(err);
            }
        )
    }
}

component.html

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

HTTP请求的实际响应如下

{
   "status":"ok",
   "totalResults":2,
   "articles":[
      {
         "source":{
            "id":"google-news-au",
            "name":"Google News (Australia)"
         },
         "title":"Former Malaysian PM questioned on graft",
         "description":"Former Malaysian Prime Minister Najib Razak could face criminal charges after being questioned over a corruption scandal."
      },
      {
         "source":{
            "id":"the-guardian-uk",
            "name":"The Guardian (UK)"
         },
         "title":"Manchester Arena attack: thousands to mark anniversary",
         "description":"Series of events across city including a mass singalong are being held one year on from terrorist attack",
      }
   ]
}

在上述代码的情况下，我收到错误 - “无法读取未定义的属性'文章'”。为什么即使在使用接口类型转换 HTTP 响应时也会出现此错误？

Answer 1

我认为您需要为您的用例使用安全导航运算符?，如下代码中使用的 -

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

Angular 中的安全导航运算符 ? 运算符，可避免在应用程序中不存在父/基值的情况下引发任何错误，并且在异步绑定的情况下也非常有用

Answer 2

您正试图在数据被解析之前访问它
在这种情况下使用safe navigation operator ( ?. )
在访问对象的属性时，如果对象为空或未定义，则可能会引发异常。 Angular 安全导航运算符(?.) 是一种流畅且方便的方法来防止属性路径中出现空值和未定义值。

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