error_handler.js:60 TypeError: Cannot read property 'name' of undefined at CompiledTemplate.prox

出现这个问题的原因是:你绑定的数据在应用启动的时候是undefined的,直接在模板中直接引用它的属性,浏览器当然就会挂掉了!

怎么解决呢?  只需要用*ngIf判断一下这个值是否有效,就可以了.

如下,这里我想做的是点击每一行li, 会在下方出现相对应的值,:

如我点击第一个li的时候,把它相对应的值数出来.显示如下:

html中: 

<div class="heroes-list">
<ul>
<li *ngFor = "let item of heroes" (click)="onSelect(item)" >
    {{item.id}}   {{item.name}}
</li>
</ul>
 <!-- 这样写会报错,应用运行的时候直接绑定,但是这个是触发事件后才给赋值  -->
<!-- <span>{{selectedHero.name}}</span> -->
<!--正确写法 -->
<span *ngIf="selectedHero">{{selectedHero.name}}</span>
</div>

ts中:

import { Hero } from './../hero';
import { Component, OnInit } from '@angular/core';
import {HEROES} from './mock-heroes';
import { parse } from 'querystring';
import { Jsonp } from '@angular/http';
@Component({
  selector: "app-heroes",
  templateUrl: "./heroes.component.html",
  styleUrls: ["./heroes.component.css"]
})
export class HeroesComponent implements OnInit {
  heroes = HEROES;
  selectedHero;
  onSelect(hero) {
    this.selectedHero = hero;
  };
  ngOnInit() {}
}