typescript – Angular2：无法从“英雄之旅”教程中的数组中检索

发布时间：2020-12-17 17:39:22 所属栏目：安全来源：网络整理

导读：我正在研究Angular2的“英雄之旅”教程,而我却无法获得数组中定义的英雄列表.虽然ngFor似乎正在工作,因为它显示了10个列出的项目(只是列表点),但缺少内容(id和名称). 这是我到目前为止的代码： import {Component} from 'angular2/core';interface Hero { id

我正在研究Angular2的“英雄之旅”教程,而我却无法获得数组中定义的英雄列表.虽然ngFor似乎正在工作,因为它显示了10个列出的项目(只是列表点),但缺少内容(id和名称).

这是我到目前为止的代码：

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

关于我可能搞砸了哪里的任何建议？

解决方法

模板的第二部分问题是英雄对象未定义(因为它与循环中的英雄不同).你可以像这样解决它：

@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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!