Góc: Chỉ định mảng từ đối tượng JSON được truy xuất qua API tới biến số

Question

Tôi đang làm việc để tải nguồn cấp dữ liệu blog qua API Google Blogger và hiển thị kết quả trong một thành phần. Tôi không thể tìm ra cách gán mảng {"items": []} cho biến bài đăng để hiển thị bài đăng. Dưới đây là những gì tôi có:

Component:

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']; 
    } 
} 

Dịch vụ:

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

và HTML (còn sử dụng 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> 

Các JSON trả về với một "mục" chính: [] có chứa một mảng các đối tượng cho các bài đăng. Trong mỗi bài đăng là một tiêu đề và khóa nội dung. Tôi không thể hiển thị bất kỳ bài đăng nào. Bất kỳ trợ giúp nào cũng được đánh giá rất cao.

Answer 1

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

bạn đang gọi phương thức như là một cuộc gọi đồng bộ.

this.feedService.loadFeed() trả về một Observable, bạn phải đăng ký luồng và gán dữ liệu vào ngữ cảnh của bạn khi có sẵn.

this.feedService.loadFeed().subscribe(resp => this.posts = resp.items)