Angular中HTML调用函数访问JSON属性报错问题求助

你遇到的核心问题是**this的上下文指向错误**：当你用原生HTML的onchange="postazioneSelezionata()"绑定函数时，函数内部的this指向的是触发事件的DOM元素（也就是那个<select>标签），而不是你的Angular组件实例。所以组件里的this.fileJson自然找不到，才会抛出"Cannot read property 'ricette' of undefined"的错误。而你在其他非原生事件绑定的函数里调用时，this是正确指向组件实例的，所以能正常访问this.fileJson。

方案1：改用Angular的事件绑定语法 #

把原生的onchange替换成Angular的(change)事件绑定，这样函数内部的this会自动指向组件实例：

修改后的HTML代码：

<select id="postazione" (change)="postazioneSelezionata()">
  <option value="" selected disabled >Scegli una postazione</option>
  <option *ngFor="let postazione of postazioniNome" value="{{postazione}}">{{postazione}}</option>
</select>

组件里的postazioneSelezionata函数不需要任何修改，就能正常访问this.fileJson了。

方案2：更优雅的Angular写法（避免DOM查询） #

还可以直接在事件中获取选中值，不用通过document.getElementById，更符合Angular的组件化思想：

HTML代码：

<select id="postazione" (change)="postazioneSelezionata($event)">
  <option value="" selected disabled >Scegli una postazione</option>
  <option *ngFor="let postazione of postazioniNome" [value]="postazione">{{postazione}}</option>
</select>

组件函数修改为：

postazioneSelezionata(event: Event) {
  this.postazione = (event.target as HTMLSelectElement).value;
  console.log(this.fileJson.ricette[this.postazione]);
}

方案3：如果非要用原生onchange（不推荐） #

如果你坚持要用原生事件绑定，可以显式把组件的this上下文传递进去：

<select id="postazione" onchange="postazioneSelezionata.call(this)">

不过这种方式不符合Angular的最佳实践，容易引发上下文混乱，不建议使用。

内容的提问来源于stack exchange，提问作者Andrea Favero