कोणीय: एपीआई के माध्यम से एक चर

Question

पर पुनर्प्राप्त JSON ऑब्जेक्ट से सरणी असाइन करें मैं Google ब्लॉगर एपीआई के माध्यम से ब्लॉग फ़ीड लोड करने और परिणामों को एक घटक में प्रदर्शित करने पर काम कर रहा हूं। मैं यह नहीं समझ सकता कि पदों को प्रदर्शित करने के लिए {"आइटम्स": []} सरणी को एक पोस्ट वैरिएबल को कैसे असाइन करना है। यहाँ मैं क्या है:

घटक:

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

सेवा:

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

और (भी बूटस्ट्रैप 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 के साथ रिटर्न एक कुंजी "आइटम": [] जिसमें पोस्ट के लिए ऑब्जेक्ट्स की एक सरणी होती है। प्रत्येक पोस्ट के भीतर एक शीर्षक और सामग्री कुंजी है। मुझे प्रदर्शित करने के लिए कोई पोस्ट नहीं मिल सकता है। कोई भी मदद बहुत ही सराहनीय होगी।

Answer 1

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

आप विधि को कॉल कर रहे हैं क्योंकि यह एक सिंक्रोनस कॉल था।

this.feedService.loadFeed() एक अवलोकन योग्य देता है, आपको स्ट्रीम के लिए सदस्यता लेनी होगी और एक बार उपलब्ध होने पर डेटा को अपने संदर्भ में असाइन करना होगा।

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