CODEWITHSUNDEEP
angular
MunirohMansoor
MunirohMansoor

Reputation: 355

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

Upvotes: 2

Views: 1459

Answers (3)

Sagar C
Sagar C

Reputation: 73

Please check the image , It works for me.

enter image description here

Upvotes: 1

Hakunamatata
Hakunamatata

Reputation: 1275

You can put *ngFor on ul. 

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

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

Upvotes: 0

dlcardozo
dlcardozo

Reputation: 4013

It's 

<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, structural directives needs an * before the directive.

Upvotes: 0

Related Questions