angular2 ng不显示数据

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

请检查图像，它适用于我。

Answer 2

它的

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

你可以把* ngFor放在ul上。

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

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