0

我正在做英雄之旅教程。当我将以下代码添加到我的 heros.component.ts 文件时，我收到一条错误消息，提示“属性 'selectedHero' 没有初始化程序，并且未在构造函数中明确分配。” 我应该怎么做才能不再看到这个错误？先感谢您。

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

我的 heros.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;
    
  
}

我的 heros.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>
4

2 回答 2

0

如果围绕显示 selectedHero 的 html 元素，您的问题是它们丢失了。尝试将其包装在 ng-if 中，如示例中所述：

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

该错误已经向您显示了问题，因为未设置所选英雄并且无法在第一个视图中显示。

于 2021-01-15T13:18:04.100 回答
0

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

selectedHero:Hero = {
  id: 0,
  name: 'default'
};
于 2021-01-15T13:22:12.893 回答