angular2 ngFor不显示数据

Question

这是我的代码

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> 

但ngFor不显示任何数据：

Result

我试着的代码，但他们没有很多风格的作品对我来说： -

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

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

@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 

Answer 1

这是

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

*ngFor，*ngIf，*ngSwitchCase，结构指令的指令之前需要一个*。

Answer 2

你可以把* ngFor上UL认证。

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

Plunker：https://plnkr.co/edit/9i0lwxaJSmnCVcZVCen1?p=preview

Answer 3

请检查图像，这对我的作品。