Angular 4 http get json file. Error cannot find a differ [duplicate]

I'm new to Angular 4, and don't really get how to fetch data yet. I've used the Tour of Heroes tutorial to learn it, but now I want to get real data from a JSON file, I'm getting an error:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Here is my code:

  private url = 'data/articles.json';

  constructor(private http: Http) { 
    this.headers = new Headers({ 'Content-Type': 'application/json' });
    this.options = new RequestOptions({ headers: this.headers });
  }

  /**
   * fetch a list of articles
   */
  getArticles(): Promise<Article[]> {
    return this.http.get(this.url, this.options)
               .toPromise()
               .then(response => response.json() as Article[])
               .catch(this.handleError);
  }

I'm simply iterating over the result of getArticles() in an ngFor to output each one.

Here's the code that consumes the service:

this.articleService.getArticles().then(articles => this.articles = articles);