Angular4中如何从下拉菜单调用组件函数（不使用控制器）

你当前的问题核心有两个：一是误用了AngularJS的ng-click指令（Angular 2+需用(click)），二是把事件绑定到了ng-container上——这个元素不会被渲染成真实DOM节点，所以任何事件绑定都不会生效。另外，直接在<option>上绑定点击事件跨浏览器兼容性差，更稳妥的方式是监听<select>的change事件。

下面是无需额外控制器的解决方案，直接复用组件本身的逻辑：

修改模板代码 #

移除无效的ng-click，转而在<select>上绑定change事件，同时修正拼写错误与重复绑定问题：

<select class="form-control" formControlName="propertyId" (change)="onPropertyChange($event)">
  <option value="">--Select Property --</option>
  
  <ng-container *ngIf="subForm.controls.subscriptiondetails.controls.selecttype.value==='Something1'">
    <option *ngFor="let property of floatList" [value]="property.floatingId">
      {{property.name}}
    </option>
  </ng-container>
  
  <ng-container *ngIf="subForm.controls.subscriptiondetails.controls.selecttype.value==='Something2'">
    <option *ngFor="let property of fixedList" [value]="property.fixedId">
      {{property.name}}
    </option>
  </ng-container>
</select>

注：把[(value)]改为[value]，因为formControlName已完成双向绑定，无需重复绑定；同时修正了Somethging1的拼写错误。

在组件类中实现处理函数 #

在你的component.ts中添加onPropertyChange函数，根据当前选择类型调用对应方法：

onPropertyChange(event: Event) {
  const selectElement = event.target as HTMLSelectElement;
  const selectedValue = selectElement.value;
  if (!selectedValue) return; // 处理未选择的空值情况

  const selectType = this.subForm.controls.subscriptiondetails.controls.selecttype.value;
  
  if (selectType === 'Something1') {
    // 从floatList匹配选中的属性
    const property = this.floatList.find(p => p.floatingId === selectedValue);
    if (property) {
      this.getFloatById(property.someId);
    }
  } else if (selectType === 'Something2') {
    // 从fixedList匹配选中的属性
    const property = this.fixedList.find(p => p.fixedId === selectedValue);
    if (property) {
      this.getfixedbyId(property.someId);
    }
  }
}

方案优势 #

• <select>的change事件跨浏览器兼容性更好，能稳定捕获用户的选择操作
• 通过事件对象获取选中值，结合当前selecttype精准匹配目标属性，再调用你需要的组件函数
• 完全依赖组件自身逻辑，无需额外控制器或模板引用变量

内容的提问来源于stack exchange，提问作者Adnan Fayaz