使用收到的数据更新模板

Question

我已经设法从 post 请求中检索了一组数据，但是现在在我分配它时视图没有更新。

@Component({
  selector: 'news-section',
  templateUrl: './news-section.component.html',
  styleUrls: ['./news-section.component.scss'],
  providers: [ NewsService ],
})
export class NewsSectionComponent implements AfterViewInit {
  slider: any;
  stub: number[];
  articles: NewsItemComponent[];

  constructor(translate: TranslateService, private http: Http, public newsService: NewsService) {
    translate.setDefaultLang('en');
    translate.use('en');

    this.articles = [];

    newsService.getNews().subscribe( news => {
        let articles: Array<any> = [];
        news.map((res) => {
            articles.push(new NewsItemComponent(res.text, res.created_at
, 'author', res.id_str);
          });
          console.log('articles', articles);
          this.articles = articles;
      });
  }


}

我在 console.log 中看到文章列表已正确更新，但未反映视图中的更改。

<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>

我需要添加一些监听器吗？我已经浏览 http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html 但我的 angular 知识仍然很基础，需要一些解释

Answer 1

ngFor="#article of articles"

应该是

*ngFor="let article of articles"

使用收到的数据更新模板

Update template with received data

javascript

typescript

angular2-template

angular