为何HTML文件无法找到UpdateSites方法？报Uncaught ReferenceError错误

你的代码有两个核心问题，导致HTML找不到UpdateSites方法：

1. 原生DOM事件绑定的作用域不匹配 #

你用的是原生onchange="UpdateSites(this.value)"，这种写法会在全局window作用域里查找函数，但你的UpdateSites是Angular组件类内部的方法——组件类的成员只属于组件实例的作用域，和全局window完全是两个独立的作用域，所以全局找不到它。

哪怕你把方法移到组件类外部（同一文件里）也没用，因为TypeScript/ES模块里的函数默认是模块级作用域，不会自动挂载到window上，全局作用域还是访问不到。

2. 私有方法的访问限制 #

就算你用了Angular的绑定方式，private修饰的方法也不能在模板里直接调用——Angular模板只能访问组件类的公共（public）成员，私有成员是组件内部的实现细节，模板无权访问。

方案1：用Angular事件绑定语法（最推荐） #

先把组件里的方法改成公共的（或者去掉private，TypeScript默认是public）：

export class TableComponent {
  // 去掉private，或者显式声明public
  UpdateSites(siteName: string) {
    console.log('SITE NAME IS'+ siteName)
  }
}

然后在HTML里用Angular的(change)事件绑定，通过$event获取选中值：

<select class="form-control" (change)="UpdateSites($event.target.value)">
  <option>France - Paris (Majunga)</option>
  <option>France - Paris (Opus)</option>
</select>

方案2：配合ngModel双向绑定（适合需要跟踪选中值的场景） #

如果你需要在组件里随时拿到当前选中的站点，可以用双向绑定：
首先在模块里导入FormsModule（比如AppModule），然后修改组件：

export class TableComponent {
  selectedSite: string;

  UpdateSites(siteName: string) {
    console.log('SITE NAME IS'+ siteName)
  }
}

HTML里用[(ngModel)]绑定选中值，同时监听ngModelChange事件：

<select class="form-control" [(ngModel)]="selectedSite" (ngModelChange)="UpdateSites(selectedSite)">
  <option>France - Paris (Majunga)</option>
  <option>France - Paris (Opus)</option>
</select>

内容的提问来源于stack exchange，提问作者Ahmed Ghrib