कोणीय 2: टूर ऑफ़ हीरोज ट्यूटोरियल में एरे से सूची पुनर्प्राप्त करने में असमर्थ

Question

मैं कोणीय 2 से हीरोज ट्यूटोरियल की टूर में देख रहा हूं और मैं सरणी में परिभाषित नायकों की सूची प्राप्त करने में सक्षम नहीं हूं। हालांकि ngFor काम कर रहा प्रतीत होता है क्योंकि यह 10 सूचीबद्ध वस्तुओं (केवल सूची बिंदु) दिखाता है लेकिन सामग्री (आईडी और नाम) गायब हैं। जहां मैं इसे में गड़बड़ हो सकता है के रूप में

import {Component} from 'angular2/core'; 


interface Hero { 
    id: number; 
    name: string; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <h2>My Heroes</h2> 
    <ul> 
     <li *ngFor="#hero of heroes"> 
      <span class="badge">{{hero.id}}</span> {{hero.name}} 
     </li> 

    </ul> 
    <div><label>id: </label> {{hero.id}}</div> 
    <div> 
     <label>name: </label> 
     <input [(ngModel)]="hero.name" placeholder="name"/> 
    </div> 
    ` 
}) 


export class AppComponent { 
    public title = 'Tour of Heroes'; 
    public heroes = HEROES; 
    public selectedHero: Hero; 
} 

var HEROES: Hero[] = [ 
    { "id": 11, "name": "Arrow" }, 
    { "id": 12, "name": "Flash" }, 
    { "id": 13, "name": "Chuck Norris" }, 
    { "id": 14, "name": "Hulk" }, 
    { "id": 15, "name": "Superman" }, 
    { "id": 16, "name": "Captain Canada" }, 
    { "id": 17, "name": "Iron Man" }, 
    { "id": 18, "name": "Ant Man" }, 
    { "id": 19, "name": "Silver Surfer" }, 
    { "id": 20, "name": "Batman" } 
]; 

कोई सुझाव:

यहाँ कोड मैं अब तक है कि है?

Answer 1

आपके टेम्पलेट के दूसरे भाग के साथ समस्या जहां hero ऑब्जेक्ट अपरिभाषित है (क्योंकि यह लूप में एक जैसा hero नहीं है)। आप इसे इस तरह ठीक कर सकते हैं:

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <ul> 
     <li *ngFor="#hero of heroes" (click)="selectedHero = hero"> 
      <span class="badge">{{hero.id}}</span> {{hero.name}} 
     </li> 
    </ul> 
    <div *ngIf="selectedHero"> 
     <div><label>id:</label> {{selectedHero.id}}</div> 
     <div> 
      <label>name: </label> 
      <input [(ngModel)]="selectedHero.name" placeholder="name"/> 
     </div> 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    public heroes = HEROES; 
    public selectedHero: Hero; 
} 

डेमो:http://plnkr.co/edit/4xivhl1wYTSsiof8QJu4?p=preview