コンテンツが表示されない：角2

Question

私はニュースフィードを提供するために私のウェブサイトの機能に取り組んでいます。ニュースフィードを取得するには、ここからAPIキーを生成しました：News API私が直面している問題は、ブラウザにコンテンツを表示できないことです。私は私のコードを共有しましょう：

results.component.html results.component.htmlで

<ul type="none" id="search-options"> 
    <li [class.active_view]="Display('all')" (click)="docClick()">All</li> 
    <li [class.active_view]="Display('news')" (click)="newsContent()">News</li> 
    <li [class.active_view]="Display('images')" (click)="imageClick()">Images</li> 
    <li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li> 
</ul> 

、それは4つのタブがあります。名前のついたタブ：すべて、画像、ビデオ - クエリに基づいて目的の結果が取得されるサーバーからデータを取得しています。しかし、Newsタブでは、私は上記のAPIと統合しようとしています。そのタブをクリックすると、ニュースフィードが表示されるはずです（単純なままです）。しかし、ニュースタブをクリックしても何も表示されません。 （コンソールエラーはありません）ただし、私がhtmlリピーターを使用している場合は、ここでどのように使用するのですか？

news.component.ts

newsFeed: {}; 
resultDisplay: string; 

constructor(private _newsService: NewsService) {} 

Display(S) { 
    return (this.resultDisplay === S); 
} 

newsContent() { 
    this.resultDisplay = 'news'; 
    this._newsService.getNews().subscribe(data => { 
    this.newsFeed = Object.assign({}, data); 
    }); 
} 

news.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Jsonp } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class NewsService { 

    public generalNews: string = 'https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=abc123'; 

    constructor(
    private http: Http, 
    private jsonp: Jsonp 
) { } 

    getNews() { 
    return this.http.get(this.generalNews).map(response => { 
     response.json() 
    }); 
    } 
} 

誰もが私がやっているの間違いを指摘して提供できる場合、それは素晴らしいことです私はそれを改善するための解決策です。前もって感謝します。 :)

Answer 1

私はあなたの質問から得たものに基づいています。あなたは次のことを行うべきです。

最初にhtmlにリピーターをお持ちください。ような何か：

<div *ngFor = "let news of newsList"> 
    <p> {{news}} </p> 
</div> 

一度にあなたのhtml 1ニュースでニュース配列を反復処理することができますこの方法。

次のものは、応答を取得してビューに渡しています。私は<li>のクリックでニュースを受け取ることを前提としています。だからあなたのコンポーネントで、あなたは

private newsList: any[] = [] //initializing a blank list of type any. 

newsContent() { 
    this.resultDisplay = 'news'; //not sure why you need this, but let it be for now 
    this._newsService.getNews().subscribe(data => { 
    this.newsList = data; //assuming data is the actual news array, if the data is entire response you might have to go for data.data 
    }); 
} 

あなたnewsList変数が移入さとhtmlに反復される。この方法を持っている必要があります。いくつか調整を加えなければならないかもしれないかもしれませんが、それはあなたが始めるのを助けるはずです。

これが役立つか、それ以上の問題が発生した場合はお知らせください。

さらにいくつかの変更は、あなたの応答に基づいて必要とされるであろう：

まず：ようなあなたのサービスメソッドからの戻りデータ：

getNews() { 
    return this.http.get(this.generalNews).map(response:any => { 
     return response.json() 
    }); 
    } 

第二に、あなたのデータはarticle配列のニュースが含まれています。その代わりにそれを使用してください：

newsContent() { 
     this.resultDisplay = 'news'; //not sure why you need this, but let it be for now 
     this._newsService.getNews().subscribe(data => { 
     this.newsList = data.article; //assuming data is the actual news array, if the data is entire response you might have to go for data.data 
     }); 
    } 

次のニュースの特定のフィールドをバインドするには、HTMLを編集します。私はあなたが好きな1つ以上をバインドすることができますバインディングタイトルです：

<div *ngFor = "let news of newsList"> 
     <p> {{news.title}} </p> 
    </div> 

これを試してください。今すぐ動作するはずです。

Answer 2

返品明細書return response.json()が届きませんでした。ビューに ``ニュースフィードを表示しているか

news.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Jsonp } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class NewsService { 

    public generalNews: string = 'https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=abc123'; 

    constructor(
    private http: Http, 
    private jsonp: Jsonp 
) { } 

    getNews() { 
    return this.http.get(this.generalNews).map(response => { 
     return response.json(); 
    }); 
    } 
}