关于显示列表的教程2:添加单击事件处理程序

Question

我正在做英雄之旅教程。当我将下面的代码添加到我的heroes.component.ts文件中时，我会得到一个错误："Property 'selectedHero‘没有初始化器，并且没有在构造函数中明确分配。“，为了使我不再看到这个错误，我应该做什么？提前谢谢你。

selectedHero: Hero;
onSelect(hero: Hero): void {
 this.selectedHero = hero;
}

我的heroes.component.ts文件如下所示：

import {Hero} from '../hero';
import {HEROES} from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit{


  heroes=HEROES;
  selectedHero:Hero;

  constructor() {}

  ngOnInit(): void {
  }

  onSelect(hero: Hero) : void {
    this.selectedHero = hero;
    
  
}

我的heroes.component.html文件如下所示：

<ul class="heroes">
    <li *ngFor= "let hero of heroes" (click)= "onSelect(hero)">
        <span class="badge">{{hero.id}}</span>{{hero.name}}
    </li>
</ul>

<h2>{{selectedHero.name | uppercase}} Details</h2>
<div><span>id:</span>{{selectedHero.id}}</div>
<div>
    <label>name:
        <input [(ngModel)]= "selectedHero.name" placeholder="name">
    </label>
</div>

Answer 1

如果在显示selectedHero的html元素周围，则您的poblem是缺少的。如果如示例中所述，尝试将其包装在ng中：

<div *ngIf="selectedHero">

  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </label>
  </div>

</div>

错误已经显示了问题，因为选定的英雄没有设置，并且无法在第一个视图上显示。

Answer 2

尝试初始化selectedHero的默认状态：

selectedHero:Hero = {
  id: 0,
  name: 'default'
};