mjanisz1 mjanisz1 - 1 month ago 9
TypeScript Question

Update template with received data

I've managed to retrieve a set of data from a post request, but now the view does not update when I assign it.

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


}


I see in the
console.log
that the articles list is updated correctly but it does not reflect the changes in the 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>


do I need to add some listeners?
I've looked through http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html but still my angular knowledge is very basic and need some explanations

Answer
ngFor="#article of articles"

should be

*ngFor="let article of articles"