typescript - Angular2: Kan ikke hente liste fra array i Tour of Heroes-veiledningen

Jeg ser på Tour of Heroes-veiledningen fra Angular2, og jeg sitter fast med at jeg ikke får hentet listen over helter som er definert i arrayen. Selv om ngFor ser ut til å fungere siden det viser 10 listede elementer (bare listepunktene), mangler innholdet (id og navn).

Her er koden jeg har så langt:

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" }
];

Noen forslag til hvor jeg kan ha rotet det til?

Svar #1

Problemet med den andre delen av malen din der hero-objektet er udefinert (fordi det ikke er det samme hero som det i løkken). Du kan fikse det slik:

@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;
}

Demo: http://plnkr.co/edit/4xivhl1wYTSsiof8QJu4?p=preview

Relaterte artikler