angular2不显示数据

这是我的密码

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(){}
}

我的模板

<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>

我的代码有什么问题？这是我的角度版本

@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

它是

Hello{{name}
电子邮件：{{email}
地址：{{address}
爱好

{{hobby}

---

*ngFor

，

*ngIf

，

*ngSwitchCase

，结构指令在指令之前需要一个

*

。

您可以将*ngFor放在ul上

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

{{hobby}

---

普朗克：

请检查图像，它适合我

---

我刚刚试过

{{{hobby}}

，效果不错。。。请确保您正在重新编译TypeScript并重新加载服务器。。。如果失败，请检查控制台是否有错误。有错误吗？pic显示一个点，因此显示的是

li

，对吗？开发工具中的元素看起来像什么？在列表上方添加

{{habiods}{json}}

以确保上下文包含您期望的数据

{{habiods}}
我的控制台上没有任何错误。@uetoaya请在plunker中重新创建问题：）避免仅链接的答案。哇。。。我只是注意到我的代码底部没有@NgModule。。但是当我放置NgModule时，我得到一个错误，上面写着“找不到名称‘NgModule’”）“导入NgModule”请参见顶部导入
]*ngFor=“let hobby of habbies”>{{{hobby}}
]*ngFor=“let hobby of habbies”>{{hobby}
<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>

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