我有一個Angular list：

點擊列表元素，我期望在明細區域看到點擊元素對應的明細：

實現方式是，給li元素注冊click事件響應函數：

語法為：

<h2>My Heroes</h2> <ul class="heroes"><li *ngFor="let everyhero of heroes" (click)="onSelect(everyhero)"><span class="badge">{{everyhero.id}}</span> {{everyhero.name}}</li> </ul>

在Component里實現事件響應函數的代碼：

定義selectedHero屬性，用于維護當前選中的hero信息：

在明細頁面里顯示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>

然而應用不能按照期望的工作：

Chrome開發者工具console標簽頁里報的錯誤：
ERROR TypeError: Cannot read property ‘name’ of undefined

問題的根源是，selectedHero這個property，在應用程序初始化時是undefined，因為當前用戶尚未點擊任何一個li元素。解決辦法是使用 Angular的指令*ngIf進行條件渲染：

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

之后問題消失：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular 界面元素的条件渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。