Question

我正在为我的网站提供一项功能，以提供新闻Feed。要获取新闻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个标签。在名称为“全部”，“图像”，“视频”的选项卡中 - 我从服务器获取数据，根据查询从中获取所需结果。但是在新闻标签中，我正在尝试将其与我上面提到的API集成。点击该标签，应该显示新闻Feed（只是保持简单）。但是，单击新闻选项卡时，它不会显示任何内容。（没有控制台错误）但是，如果我使用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();
    });
  }
}

内容未显示：Angular 2

2 个答案: