Kątowa: Przypisz tablicę z obiektu JSON pobranego przez interfejs API do zmiennej

Question

Pracuję nad ładowaniem kanału blogu za pomocą interfejsu API Google Blogger i wyświetlaniem wyników w komponencie. Nie wiem, jak przypisać tablicę {"items": []} do zmiennej postów, aby wyświetlić posty. Oto co mam:

Składnik:

import { Component, OnInit } from '@angular/core'; 
import { FeedService, Feed } from './feed.component.service'; 
import { Observable } from 'rxjs/Observable'; 

@Component({ 
selector: 'feed', 
templateUrl: './feed.component.html', 
styleUrls: ['./feed.component.scss'] 
}) 
export class FeedComponent implements OnInit { 
    constructor(private feedService: FeedService){ } 
    feed: Feed; 
    posts: string[]; 

    ngOnInit(){ 
     this.feed = this.feedService.loadFeed(); 
     this.posts = this.feed['items']; 
    } 
} 

usługi:

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { Feed } from './feed.component.service'; 

import 'rxjs/add/operator/map'; 

export interface Feed { 
    [key: string]: any; 
} 

@Injectable() 
export class FeedService { 
    constructor(private http: Http){ } 
    loadFeed(): Observable<Feed> { 
     const headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 

     const options = new RequestOptions({ headers: headers }); 

     return this.http 
      .get('https://www.googleapis.com/blogger/v3/blogs/3213900/posts?key=AIzaSyDDF7BymSIZjZKJ5x_FCLnV-GA1TbtIyNI', options) 
      .map(response => response.json().data as Feed); 
    } 
} 

i HTML (również za pomocą Bootstrap 4):

<button class="btn back">Back</button> 
<div class="header"> 
    <div class="container"> 
     <div class="row"> 
      <h1>feed</h1> 
     </div> 
    </div> 
</div> 
<div class="post"> 
    <div *ngFor="let post of posts"> 
     <h1> {{ post.title }} </h1> 
     <p> {{ post.content }} </p> 
    </div> 
</div> 
<div class="footer"> 
    <div class="container"> 
     <div class="row"> 
     </div> 
    </div> 
</div> 

JSON powraca z klucz "items": [], który zawiera tablicę obiektów dla postów. W każdym wpisie jest tytuł i klucz zawartości. Nie mogę wyświetlić żadnych postów. Każda pomoc jest bardzo doceniana.

Answer 1

//here 
this.feed = this.feedService.loadFeed(); 
this.posts = this.feed['items']; 

Wywołujesz metodę, ponieważ była to rozmowa synchroniczna.

this.feedService.loadFeed() zwraca wartość obserwowalną, należy zasubskrybować strumień i przypisać dane do kontekstu, gdy będą dostępne.