title: angular2 ngFor not display data
body: <p>This is my code </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-jobcompleted',
    templateUrl: './jobcompleted.component.html',
    styleUrls: ['./jobcompleted.component.scss']
  })
  
  export class JobcompletedComponent {
  
    name: string;
    email: string
    address: string;
    hobbies: string[];
    showHobbies: boolean;
  
    constructor(){
    this.name = "john doe",
    this.email = "john@gmail.com",
    this.address = "ukay perdana"
    this.hobbies= ['music','movies','sport'];
    this.showHobbies = true;
    }
    tooggleHobbies(){}
  }
  </code></pre>
  
  <p>my template</p>
  
  <pre><code>&lt;h2&gt;Hello {{ name }}&lt;/h2&gt;
  &lt;h2&gt;email : {{ email }}&lt;/h2&gt;
  &lt;h2&gt;address : {{ address }}&lt;/h2&gt;
  &lt;h2&gt;hobby&lt;/h2&gt;
  &lt;ul&gt;
    &lt;li ngFor="let hobby of hobbies"&gt;{{ hobby }}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But the <code>ngFor</code> does not display any data:</p>
  
  <p><a href="https://i.stack.imgur.com/E4qT2.jpg" rel="nofollow noreferrer">Result</a></p>
  
  <p>I've tried many style of code but none of them works for me:-</p>
  
  <pre><code>    &lt;ul&gt;
        &lt;li *ngFor="let hobby of hobbies"&gt;{{ hobby }}&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;ul&gt;
        &lt;li *ngFor="#hobby of hobbies"&gt;{{ hobby }}&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;ul&gt;
            &lt;li ngFor="#hobby of hobbies"&gt;{{ hobby }}&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>What is wrong with my code? And this is my angular version</p>
  
  <pre><code>@angular/cli: 1.0.0-beta.31
  node: 6.9.2
  os: win32 x64
  @angular/common: 2.4.7
  @angular/compiler: 2.4.7
  @angular/core: 2.4.7
  @angular/forms: 2.4.7
  @angular/http: 2.4.7
  @angular/platform-browser: 2.4.7
  @angular/platform-browser-dynamic: 2.4.7
  @angular/router: 3.4.7
  @angular/cli: 1.0.0-beta.31
  @angular/compiler-cli: 2.4.7
  </code></pre>