angular2 ngFor not display data

This is my 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 = "[email protected]",
  this.address = "ukay perdana"
  this.hobbies= ['music','movies','sport'];
  this.showHobbies = true;
  }
  tooggleHobbies(){}
}

my template

<h2>Hello {{ name }}</h2>
<h2>email : {{ email }}</h2>
<h2>address : {{ address }}</h2>
<h2>hobby</h2>
<ul>
  <li ngFor="let hobby of hobbies">{{ hobby }}</li>
</ul>

But the ngFor does not display any data:

Result

I've tried many style of code but none of them works for me:-

    <ul>
      <li *ngFor="let hobby of hobbies">{{ hobby }}</li>
    </ul>

<ul>
      <li *ngFor="#hobby of hobbies">{{ hobby }}</li>
    </ul>

<ul>
          <li ngFor="#hobby of hobbies">{{ hobby }}</li>
        </ul>

What is wrong with my code? And this is my angular version

@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