CODEWITHSUNDEEP
javascriptangulartypescriptangular2-template
mjanisz1
mjanisz1

Reputation: 1516

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

Upvotes: 1

Views: 50

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657168

ngFor="#article of articles"

should be

*ngFor="let article of articles"

Upvotes: 2

Related Questions