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

請檢查圖像，這對我的作品。