angular - Hur man får värdet från en objekt-array

Hur får man värdet av objektarray från dataarray? Nedan är min kod

Komponent

FmtNews(mediasource) {
    let body = mediasource;
    console.log("Test body:" +body)
    this.commonService.getTopNews(body)
    .subscribe((res) => {
      if (res['status'].code === 102) {
        // this.headerService.isLoading = false;
         console.log(res['data'])
      }
    });
}

När jag console.log(res['data']) fick jag ett exempel som detta.

(4)[..]
 0: Object (mediaSource: "News Today", pageUrl: "https://www.newstoday.com", contents:)
 1:Object (mediaSource: "News Today", pageUrl: "https://www.newstoday.com", contents:)
 2:Object (mediaSource: "News Today", pageUrl: "https://www.newstoday.com", contents:)
 3:Object (mediaSource: "News Today", pageUrl: "https://www.newstoday.com", contents:)

Mitt problem är.., Hur jag vill hämta data i ett objekt för att visa på en HTML-sida

HTML

<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">title here</h5>
    <span>url here</span>
    <div>
    contents here
    </div>
  </div>
</div>

Svar #1

Deklarera bara en lokal variabel och tilldela svaret till den variabeln som kan användas i HTML:

list: any[] = []; <-- here

FmtNews(mediasource) {
    let body = mediasource;
    console.log("Test body:" +body)
    this.commonService.getTopNews(body)
    .subscribe((res) => {
      if (res['status'].code === 102) {
         this.list = res['data'];
         console.log(res['data'])
      }
    });
}

HTML :

<div *ngFor="let obj of list">
   {{obj.mediaSource}}
</div>

ELLER

om du vill visa en mediaSource som en titel, då:

<div>{{ list[0]?.mediaSource }}</div>

vilket kommer att visa den första objektets mediaSource-egenskap!

REDIGERA

<div class="media" *ngFor="let obj of list">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">{{ obj.mediaSource }}</h5>
    <span>{{ obj.pageUrl}}</span>
    <div>
    {{ obj.contents}}
    </div>
  </div>
</div>

Svar #2

Spara datan till en variabel this.data=res['data']

I din HTML,

<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body" *ngFor="let obj of data">
    <h5 class="mt-0">{{obj.mediaSource}}</h5>
    <span>{{obj.pageUrl}}</span>
    <div>{{obj.contents}}</div>
  </div>
</div>