Question

我正试图从Angular Docs建立英雄之旅应用程序。在定义了我的英雄阵列并尝试循环之后，它只会显示空div。

这是我的代码：

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

为什么会这样？

Answer 1

您的循环不会打印 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>

Answer 2

根据您的问题下方的组件代码和评论：

错误类型错误：无法读取未定义的属性“名称”

选项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

<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之间的区别在于，在{3}未在Option3初始化时，selectedHero没有显示任何内容。

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

2 个答案: