एंगुलर 2

Question

में नेस्टेड ऑब्जर्जेबल मैं हैकरन्यूज़ पर शीर्ष आलेखों की एक सूची पुनर्प्राप्त करने के लिए एंगुलर 2 के http GET को आजमा रहा हूं और इसके बाद मैं अपने संबंधित विवरण को नेस्टेड अवलोकन में पुनर्प्राप्त कर दूंगा।

जब मैं लूप करने और अपने एचटीएमएल में डेटा प्रदर्शित करने की कोशिश करता हूं तो मुझे यह त्रुटि आती है।

नहीं खोजा जा सका एक अलग समर्थन वस्तु '[वस्तु वस्तु]'

इसके अलावा, मैं वहाँ अनुमान लगा रहा हूँ यह करने के लिए एक बेहतर तरीका है, किसी भी सूचक होना चाहिए?

getTopPost() { 
    this.http.get('https://hacker-news.firebaseio.com/v0/topstories.json') 
     .map(res => res.json()) 
     .subscribe(
     data => { 
        data.map(function(postId){ 
          let storyUrl = "https://hacker-news.firebaseio.com/v0/item/"+ postId +".json"; 
          that.http.get(storyUrl) 
           .map(res => res.json()) 
           .subscribe(data => that.hnData = data, 
              err => that.logError(err), 
              () => console.log(that.hnData)); 

         }); 

       }, 
     err => this.logError(err); 
    ); 

    } 

एचटीएमएल

<ion-item *ngFor="#item of hnData"> 
     {{item.title}} 
</ion-item> 

Answer 1

मुझे नहीं लगता कि यह घोंसला नमूदार XHR कॉल करने के लिए एक अच्छा अभ्यास है ... लेकिन मैं इसके बारे में एक विशेषज्ञ नहीं हूँ और आपको बता नहीं सकता आप क्यों मिले यह अपवाद (शायद इस that var ..) के बारे में।

लेकिन मैं तुम्हें दिखाने के लिए एक अलग दृष्टिकोण है:

एक पहले घटक <top-stories> लोड आईडी सूची और फिर दूसरों घटक <top-story> उत्पन्न हर एक के लिए:

@Component({ 
    selector: 'top-stories', 
    providers: [], 
    template: ' 
    <div> 
     <h2>Hacker news top stories:</h2> 
     <ul> 
     <li top-story *ngFor="#story; #i = index of list | async" [num]="i+1" [id]="story"></li> 
     </ul> 
    </div> 
    ', 
    directives: [TopStory] 
}) 
export class TopStories { 
    list: Observable<Array<number>>; 

    constructor(private http: Http) { 
    this.list = this.http.get('https://hacker-news.firebaseio.com/v0/topstories.json') 
    .map(res => res.json()) 
    .map(list => list.slice(0, 30)); 
    } 
} 

घटक <top-story> लोड ही विवरण पोस्ट और इसे दिखाएं:

@Component({ 
    selector: '[top-story]', 
    providers: [], 
    template: ` 
    <div> 
     <a *ngIf="item" [href]="item?.url">{{ num + ': ' + item?.title }}</a> 
     <span *ngIf="!item">loading...</span> 
    </div> 
    `, 
    directives: [] 
}) 
export class TopStory implements OnInit, OnDestroy { 
    @Input() num: Number; 
    @Input() id: Number; 

    sub: any; 
    item: object; 

    constructor(private http: Http) {} 

    ngOnInit() { 
    this.sub = this.http.get('https://hacker-news.firebaseio.com/v0/item/' + this.id + '.json') 
    .map(res => res.json()) 
    .subscribe(item => this.item = item); 
    } 

    ngOnDestroy() { 
    this.sub.unsubscribe(); 
    } 
} 

आप इस प्लंकर में इसके साथ खेल सकते हैं: http://plnkr.co/edit/BRMlyD?p=preview

Answer 2

मुझे लगता है कि आप इस तरह से एक और अधिक आरएक्स-ish तरीके से पुनर्लेखन कर सकते हैं:

getTopPost() { 
    return http.get('https://hacker-news.firebaseio.com/v0/topstories.json') 
    .map(res => res.json()) 
    .mergeMap(list => Observable.fromArray(list)) 
    .mergeMap(postId => http.get("https://hacker-news.firebaseio.com/v0/item/"+ postId +".json")) 
    .map(res => res.json()) 
}