Ajax 将检索到的数据从请求分配到模板

我正在尝试获取新闻列表，然后在组件的模板中呈现它们

我从这个教程中学到的东西有点过时了

news item类如下所示

export class NewsItemComponent {
  text: string;
  date: Date;
  author: string;
  link: string
  constructor(text: string,
              date: Date,
              author: string,
              link: string) {
    this.text = text;
    this.date = date;
    this.author = author;
    this.link = link;
  }
}

正在检索数据的服务：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { NewsItemComponent } from './news-item/news-item.component';


@Injectable()
export class NewsService {

  constructor(public http: Http) {
    console.log('Creating NewsService');
  }

  getNews() {
    let url = 'http://localhost/test-api/';
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    this.http.post(url, '', options)
      // initial transform - result to json
      .subscribe( (res:Response) => {
        let articles: Array<any> = [];
        res.json().map((articles: Array<any>) => {

                articles.push(new NewsItemComponent('asd', new Date(), 'asdf', 'asdf'));
              });
              console.log('articles', articles);
              return articles
      });
  }
}

以及以下观点：

<section id="news" sectionVisible>
  <div>
    <h1>{{ 'Nav.News' | translate }}</h1>
  </div>
  <div class="news-wrapper clear-fix">
      <div class="column carousel-cell" ngFor="#article of articles">
        <article>
        <a href="#" class="hovered">
          <div class="bg-hover">
            <p>
              Visit
            </p>
          </div>
        </a>
        <h2>News title</h2>
        <time>21.10.2015 16:30</time>
        <p>
          Etiam faucibus sodales leo, rutrum molestie nisi luctus in. Duis quis viverra diam, vitae hendrerit augue. Donec ultricies nisi vel placerat sodales. Donec varius convallis mauris egestas vulputate. Integer fermentum tincidunt hendrerit. Donec eget nisl
          eros. Pellentesque a fringilla lorem.
        </p>
        </article>
      </div>
  </div>
</section>

此行引发一个错误：

类型void上不存在属性subscribe

我也不知道为什么会这样。

---

有什么提示吗？

您需要从服务中删除

subscribe

方法。服务应该只返回可观察的，订阅应该在实际组件中完成

订阅一个可观察对象等于调用一个函数。您希望在组件中检索结果，因此需要在那里订阅。服务应该只保存在HTTP调用（例如调用

res.json（）

）之后准备数据的逻辑

服务

getNews() {
  let url = 'http://localhost/test-api/';
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });

  return this.http.post(url, '', options)
     .map(res => res.json());
}

组成部分：

newsService.getNews()
    .subscribe( news => {
      let articles: Array<any> = [];
      news.map((articles: Array<any>) => {
            articles.push(new NewsItemComponent('asd', new Date(), 'asdf', 'asdf'));
          });
          this.articles = articles
});

newservice.getNews（）
.订阅（新闻=>{
let articles:Array=[]；
news.map（（文章：数组）=>{
push（新的NewsItemComponent（'asd'，new Date（），'asdf'，'asdf'）；
});
this.articles=文章
});

getNews() {
  let url = 'http://localhost/test-api/';
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });

  return this.http.post(url, '', options)
     .map(res => res.json());
}

newsService.getNews()
    .subscribe( news => {
      let articles: Array<any> = [];
      news.map((articles: Array<any>) => {
            articles.push(new NewsItemComponent('asd', new Date(), 'asdf', 'asdf'));
          });
          this.articles = articles
});