Question

我正在尝试使用他们在网站上提供的教程来学习angular4

这是代码

hero.ts

export  class  Hero{

    constructor(
        public  id: number,public name: string
    ){}
}

component.ts中的

import { Component } from '@angular/core';

import {Hero }  from  './hero';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {


  title : string;
  hero  : string;
  selectedHero: Hero;

  heroes = [
      new Hero(1, 'Windstorm'),
      new Hero(13, 'Bombasto'),
      new Hero(15, 'Magneta'),
      new Hero(20, 'Tornado')
  ]

  myHero = this.heroes[0];

  constructor(){
    this.title = 'Tour of heros';

  }

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

HTML

<ul>
  <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
    {{ hero.name }}
  </li>
</ul>
<p>{{selectedHero.name}}</p>

点击每个li我想在所选对象中显示详细信息，但我收到以下错误

selectedHero.name未定义

Answer 1

如果在访问其任何属性

之前设置了selectedHero，则签入模板

<p *ngIf="selectedHero">{{selectedHero.name}}</p>

或在组件中创建一个空实例（更新后的答案）

selectedHero: Hero = new Hero(12, 'somename');

Angular4：无法读取undefined的属性

1 个答案: