CODEWITHSUNDEEP
angular
ankur
ankur

Reputation: 2059

Need help for first angular 2 app not able to display data of an object

Frist of all I'm a beginner in Angular 2 and learning it from the official website using tutorials and documentation below is the code:-

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}  

const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

@Component({
  selector: 'app-root',
  template:`
  <h1>{{ top }}</h1>
  <h2>My Heroes</h2>
  <ul class="heroes">
    <li *ngFor="let hero of heroes">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
  </div>
`
})


export class AppComponent {
  top = 'Tour of Heroessss';
  heroes = HEROES;
}

when the code is compiled I'm not able to display the name as well the tag(using interpolation) only bullets and is displayed.

Have also tried to add the entire object in the AppComponent Class but still the same result.

The project does not contain any code .html or .css file and haven't changed any code in 'app.component.spec.ts' or 'app.module.ts' or 'index.ts'.

Anyone does know what actually I'm missing.

Upvotes: 0

Views: 229

Answers (3)

IceTea
IceTea

Reputation: 660

tl;dr: The problem lies in this div

  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
  </div>

As someone has mentioned, you can't use hero.name here because this div is already outside the *ngFor directive.

The Full Story/Working Code

Seems like you're adding on code to the previous part of the tutorial. However, the previous part there was only one hero specified. Since we have replaced hero with heroes in the .ts file, we need to change to code so that we can still access the information of hero.

If you take out your code that I have extracted above and run, then it will work. Here's a similar one.

<h2>My Heroes</h2>
<div>
    <ul class="heroes">
        <li *ngFor="let hero of heroes">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
        </li>
    </ul>
</div>

If you want to include the input boxes then we need to use a repeater directive again *ngFor="let hero of heroes" as such:

<h2>My Heroes</h2>
<div>
    <ul class="heroes">
        <li *ngFor="let hero of heroes">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
        </li>
    </ul>
</div>

<li *ngFor="let hero of heroes">
    <div>
        <label for="name"></label>
        <input [(ngModel)]="hero.name" type="text" placeholder="name"/>
    </div>
</li>

Upvotes: 0

ranakrunal9
ranakrunal9

Reputation: 13558

Your component and module should be as below :

import { Component, NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'

export class Hero {
  id: number;
  name: string;
}  

const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

@Component({
  selector: 'app-root',
  template:`
  <h1>{{ top }}</h1>
  <h2>My Heroes</h2>
  <ul class="heroes">
    <li *ngFor="let hero of heroes">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
  </div>
`
})    
export class AppComponent {
  top: string = 'Tour of Heroessss';
  heroes : Hero[] = HEROES;

  // You need to set hero property
  hero: Hero = HEROES[0];
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Upvotes: 1

Rohan Kangale
Rohan Kangale

Reputation: 971

May be you can try for the following things:

  • First, declare the top and heroes as public (inside AppComponent)
  • If first doesn't works, remove the let(from the ngFor and use #) Eg: *ngFor="# hero of heroes"

Upvotes: 0

Related Questions