Question

我正在调用HTTP请求，并使用服务中的接口将收到的响应类型转换为所需类型。 HTTP响应是一个JSON对象，带有一些键值对项。我已经在组件中订阅了该服务。当我控制记录订阅功能中收到的响应时，它会使用键值对完美地记录对象。但是当我将该对象分配给组件类成员时，它似乎并没有对所需的接口类型进行类型转换。因为当我在组件html中使用类成员变量键时，我得到错误 - ＆＃39;无法读取属性＆＃39; X＆＃39;未定义＆＃39;

以下是代码段 -

接口

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);
    }
}

component.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",
      }
   ]
}

如果是上述代码，我收到错误 - ＆＃34;无法读取属性＆＃39;文章＆＃39;未定义＆＃34;。为什么即使使用接口类型转换HTTP响应，我也会收到此错误？

Answer 1

我认为您需要使用安全导航操作符?作为代码中使用的下方用例 -

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

Angular中的

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

Answer 2

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

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

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

2 个答案: