распечатать данные из простого API в angular 8

Question

У меня есть URL-адрес API ниже. Мне нужно распечатать данные на моем html компоненте, дайте мне знать метод печати. У меня есть следующий метод, поэтому мне нужно напечатать строку, например. page_tilte

resData;
newsdata;

ngOnInit() {
const url="https://tiavik.com/maken/api/aboutUs";
this.http.get(url).subscribe(res=>{
  this.resData=res;
  this.newsdata=this.resData.Data
  console.log(res);
}) 

Я использую это в моем html: -

<div class="h3 block-title" *ngIf="newsdata">
<div *ngFor="let news of newsdata">
  {{news?.page_title}}
</div>
</div>

пожалуйста, дайте мне знать, что мне делать? ...

Answer 1

Если ответ API - это просто объект, то вместо итерации мы можем напрямую читать данные из объекта, как показано ниже, как показано ниже.

result;

ngOnInit() {
 const url="https://tiavik.com/maken/api/aboutUs";
 this.http.get(url).subscribe(res=>{
 this.result = res.data;
});

Прочитать данные напрямую из формы result в шаблоне.

<div class="h3 block-title">
 {{ result.page_title }}
</div>

Answer 2

Исходя из моего комментария, необходимы два изменения.

1. Объект ответа из URL-адреса имеет свойство data not Data. Имена свойств чувствительны к регистру, поэтому доступ к ним должен осуществляться через this.newsdata=this.resData.data.

2. Ответ - это объект, а не массив. Чтобы l oop поверх объекта с помощью директивы *ngFor, вы можете использовать канал keyvalue.

Controller

resData;
newsdata;

ngOnInit() {
const url="https://tiavik.com/maken/api/aboutUs";
this.http.get(url).subscribe(res=>{
  this.resData = res;
  this.newsdata = this.resData.data;
  console.log(res);
});

Template

<div class="h3 block-title" *ngIf="newsdata">
  <div *ngFor="let news of newsdata | keyvalue">
    {{ news.key }} - {{ news.value }}
    <!-- to print specific values (eg. 'page_title') -->
    <ng-container *ngIf="news.key === 'page_title'">
      {{ news.value }}
    <ng-container>
  </div>
</div>