內容未顯示：Angular 2

Question

我正在爲我的網站提供新聞Feed的功能。要獲得新聞提要，我從這裏生成了一個API密鑰：News API。我面臨的問題是，我無法在瀏覽器中顯示內容。讓我分享我的代碼：

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> 

在results.component.html，它有4個標籤。在名稱爲：All，Image，Video的標籤中 - 我從服務器獲取數據，從中根據查詢獲取所需結果。但在新聞標籤中，我試圖將它與上面提到的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一次一個新聞。

接下來的事情，得到的響應並將其傳遞給視圖。我假設你點擊<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以綁定新聞的特定字段。我綁定標題，你可以綁定一個或多個你喜歡的：

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