0

我正在尝试从 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",
  }
];

为什么会这样？

4

2 回答 2

0

您的循环不是打印div元素，而是打印il元素（可点击）。您必须单击其中一个il元素才能在 html 模板的 div 中显示“选定英雄”。

如果要直接显示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-19T02:28:30.590 回答
0

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

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

选项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 的区别在于 Option3处未初始化时不会selectedHero显示任何内容。selectedHero

于 2017-07-19T03:28:22.200 回答