Невозможно отобразить HTTP-ответ на тип интерфейса в угловых 5 - PullRequest
Новая
       13

Невозможно отобразить HTTP-ответ на тип интерфейса в угловых 5

0 голосов
/ 22 мая 2018

Я вызываю HTTP-запрос и набираю полученный ответ на требуемый тип с использованием интерфейса в службе.HTTP-ответ - это объект JSON с некоторой парой ключей-значений.Я подписался на эту услугу в компоненте.Когда я консоль регистрирую ответ, полученный в функции подписки, он отлично регистрирует объект с парой ключ-значение.Но когда я назначаю этот объект члену класса компонента, он, кажется, не соответствует типу требуемого интерфейса.Потому что, когда я использую переменные ключи члена класса в компоненте html, я получаю сообщение об ошибке - «Не удается прочитать свойство« X »из неопределенного» * ​​1001 *

Вот фрагменты кода -

Интерфейс 

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

В случае кода выше, я получаю сообщение об ошибке - «Невозможно прочитать свойство« статьи »неопределенного».Почему я получаю эту ошибку даже при приведении типа ответа HTTP с интерфейсом?

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Вы пытаетесь получить доступ к данным до их разрешения
В этом случае используйте безопасный оператор навигации (?.)
При доступе к свойствам объекта ономожет выдать исключение, если объект нулевой или неопределенный.Оператор угловой безопасности (?.) - это удобный и удобный способ защиты от нулевых и неопределенных значений в путях свойств. 

<ng-container *ngIf="newsData">
    <div *ngFor="let item of newsData?.articles">
        {{item.description}}
    </div>
<ng-container>
0 голосов
/ 22 мая 2018

Я думаю, вам нужно использовать оператор безопасной навигации ? для вашего случая использования, как показано ниже в коде - 

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

оператор безопасной навигации ? оператор в Angular, который позволяет избежать любых ошибокесли родительское / базовое значение не существует в вашем приложении, а также очень полезно в случае асинхронного связывания

...