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

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

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

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

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

html中: 

    {{item.id}}   {{item.name}}


 


{{selectedHero.name}}

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() {}
}