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

爲什麼發生這種情況？

來源

2017-07-19 olayemii

你看到標題 – 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初始化。

來源

2017-07-19 03:28:22 Pengyy

現在工作正常，使用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>

來源

2017-07-19 02:28:30 Jows

Angular無法檢索英雄之旅中的英雄列表

回答

相關問題