Angular无法检索英雄之旅中的英雄列表

问题描述：

我正在尝试从Angular Docs中建立英雄之旅应用程序。定义我的英雄阵列并试图循环播放它后，它只会产生空的div。Angular无法检索英雄之旅中的英雄列表

这是我下面的代码：

HTML

<h1>{{title}}</h1> 
<ul class="heroes"> 
    <li *ngFor="let hero of heroes" (click)="onSelectHero(hero)"> 
     <span class="badge">{{hero.id}}</span>{{hero.name}} 
    </li> 
</ul> 
<div> 
    <h2>{{selectedHero.name}} details!</h2> 
    <div><label>id: </label>{{selectedHero.id}}</div> 
    <div> 
     <label>name: </label> 
     <input [(ngModel)]="selectedHero.name" placeholder="name"/> 
    </div> 
</div>

打字稿

import { Component } from '@angular/core'; 
import { Hero } from './shared/model/hero'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title:string; 
    heroes: Hero[]; 
    selectedHero: Hero; 
    constructor(){ 
    this.title = 'app'; 
    this.heroes = HEROES; 
    } 
    onSelectHero(hero: Hero){ 
    this.selectedHero = hero; 
    } 
} 
const HEROES: Hero[] = [ 
    { 
    id: 11, 
    name: "NightOwl", 
    }, 
    { 
    id: 12, 
    name: "Batman", 
    }, 
    { 
    id: 13, 
    name: "Superman", 
    }, 
    { 
    id: 14, 
    name: "Spiderman", 
    }, 
    { 
    id: 15, 
    name: "Hulk", 
    } 
];

为什么发生这种情况？

你看到标题 – Sajeetharan

没有，标题就是空的div – olayemii

检查，如果你有控制台 – Sajeetharan

答

和你的问题如下评论：

ERROR TypeError: Cannot read property 'name' of undefined

选项1：你需要在你的组件初始化selectedHero

selectedHero: Hero = new Hero();

选项2：使用安全导航?

<div> 
    <h2>{{selectedHero?.name}} details!</h2> 
    <div><label>id: </label>{{selectedHero?.id}}</div> 
    <div> 
    <label>name: </label> 
    <input [(ngModel)]="selectedHero?.name" placeholder="name"/> 
    </div> 
</div>

选项3：使用ngIf避免访问selectedHero虽然它不是被initiailized

<div *ngIf="selectedHero"> 
    <h2>{{selectedHero.name}} details!</h2> 
    <div><label>id: </label>{{selectedHero.id}}</div> 
    <div> 
    <label>name: </label> 
    <input [(ngModel)]="selectedHero.name" placeholder="name"/> 
    </div> 
</div>

点评： Option1,2和Option3之间的区别在于没有任何关于selectedHero的显示，而selectedHero还没有在Option3初始化。

现在工作正常，使用ngIf指令！ – olayemii

@OLayemiGarubaDonyemisco很高兴听到。 :-) – Pengyy

答

您的循环未打印div元素但il元素（可点击）。您必须点击il元素中的一个，才能在您的html模板的div中显示“Selected Hero”。

如果你想直接显示在DIV英雄的名单元素，你有更换模板：基于组件代码

<h1>{{title}}</h1> 
    <div *ngFor="let hero of heroes"> 
    <h2>{{hero.name}}</h2> 
    <div><label>id: </label>{{hero .id}}</div> 
    <div> 
    <label>name: </label> 
    <input [(ngModel)]="hero.name" placeholder="name"/> 
    </div> 
    </div>

Angular无法检索英雄之旅中的英雄列表

相关推荐