出現這個問題的原因是:你繫結的資料在應用啟動的時候是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() {}
}