ngIf對Angular Heroes教程沒有價值

-1

用<div>將模板的HTML英雄細節內容包裝起來。然後添加ngIf內置指令並將其設置爲組件的selectedHero屬性。ngIf對Angular Heroes教程沒有價值

<div *ngIf="selectedHero"> 
    <h2>{{selectedHero.name}} details!</h2> 
    <div><label>id: </label>{{selectedHero.id}}</div> 
    <div> 
    <label>name: </label> 
    <input [(ngModel)]="selectedHero.name" placeholder="name"/> 
</div>

該應用程序不再失敗和名稱列表在瀏覽器中再次顯示。

事實是，沒有ngIf指令，應用程序永遠不會失敗。爲了測試這一點，我清空了輸入表單，這反過來清空了綁定的列表項，但無論是否包含ngIf，都不會發生任何奇怪的事情。

任何解釋？

來源

2017-07-17 usefulBee

您確定控制檯中沒有錯誤嗎？因爲'selectedHero.name'應該會失敗，如果'selectedHero'未定義或爲空。 –

@MikeMcCaughan零錯誤 – usefulBee

然後我想這是教程中的一個錯誤。你應該告訴Angular團隊...... –

該演示似乎失敗了我使用this example，模板導致錯誤，因爲該模型是未定義的。

TypeError: Cannot read property 'name' of undefined

的ngIf指令通過如果模型不可省略元件防止這些錯誤。

來源

2017-07-17 21:32:10

對我來說也是失敗的[PLNKR上的DEMO]（https://plnkr.co/edit/AaFcdmNFyyslCNYcqZcG?p=preview）。 – georgeawg

關鍵是在這一點上作爲tutorial解釋說：

所以用這個簡單 selectedHero財產更換英雄屬性

然而，使用nglf是不是唯一因爲即使使用空值來初始化所選屬性也足以防止相關錯誤，這使得ngif指令顯得無用：

export class AppComponent { 
    selectedHero: Hero = { 
    id: null, 
    name: null 
}; 
}

來源

2017-07-18 16:18:06 usefulBee

ngIf對Angular Heroes教程沒有價值

回答

相關問題