Question

使用<div>包装模板的HTML英雄详细信息内容。然后添加ngIf内置指令并将其设置为组件的selectedHero属性。

<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，都不会发生任何奇怪的事情。

任何解释？

Answer 1

使用this example时，演示似乎失败了，模板导致错误，因为模型未定义。

TypeError: Cannot read property 'name' of undefined

如果模型不可用，则ngIf指令通过省略元素来防止这些错误。

Answer 2

正如tutorial：

中所解释的那样，关键在于此

所以用这个简单 selectedHero属性替换hero属性

但是，使用nglf不是唯一的解决方案，因为即使使用空值初始化所选属性也足以防止相关错误，这使得ngif指令显得毫无用处：

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

ngIf对Angular Heroes教程毫无价值

2 个答案: