javascript - 使用收到的数据更新模板

标签 javascript angular typescript angular2-template

我已经设法从一个发布请求中检索了一组数据,但是现在当我分配它时 View 没有更新。

@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 中看到文章列表已正确更新,但未反射(reflect) View 中的更改。

<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 知识仍然非常基础,需要一些解释

最佳答案

ngFor="#article of articles"

应该是

*ngFor="let article of articles"

关于javascript - 使用收到的数据更新模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40083992/

相关文章:

javascript - 为什么我的 SectionList 有时只呈现一个部分?

javascript - Angular - 输入值和选择占位符不起作用

java - Web 应用程序的硬件支持

Angular:可以在开发服务器(ngserve)上使用 PWA 吗?

angular - 使用 TestBed 为具有依赖关系的 Angular 服务创建测试用例

angular - 将参数传递给路由守卫

javascript - $.ajax 填充更改作为函数参数传递的对象名?

javascript - 为什么 TypeScript 会在 IIFE 中打包一个类?

node.js - 如何稳定 {Node} npm 依赖系统?

django - CORS 在 dockerized Django REST + Angular 项目中被阻止