title: ngFor is not working for an array
body: <p>Here's my code:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ProjectService } from '../../services/project';
  import { Project } from '../../models/project';
  
  @Component({
      selector: 'projects-component',
      template: `
          &lt;pre&gt;{{ projects | json }}&lt;/pre&gt;
          &lt;span&gt;I WORK&lt;/span&gt;
          &lt;span *ngFor="let project of projects"&gt; here: {{ project | json }} &lt;/span&gt;
      `,
      styleUrls: ['./style.css']
  })
  export class ProjectsComponent {
  
      projects: Project[];
  
      constructor(
          private projectService: ProjectService
      ) {
          this.projectService.projects().then((projects) =&gt; {
              this.projects = projects;
              console.log('Projects:',this.projects);
          });
      }
  }
  </code></pre>
  
  <p>That prints the following:</p>
  
  <p><a href="https://i.stack.imgur.com/aa9O1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aa9O1.png" alt="enter image description here"></a></p>
  
  <p><code>&lt;span *ngFor="let project of projects"&gt; here: {{ project | json }} &lt;/span&gt;</code> is supposed to print each project but it isn't, I suspected at first that there might some css being applied to the <code>&lt;span&gt;</code> tag so I added that <code>&lt;span&gt;I WORK&lt;/span&gt;</code> to make sure that nothing suspicious is happening and there isn't.</p>
  
  <p>What am I missing from my code to get the *ngFor working?</p>