Angular - 选择选项元素上的单击事件答案

【问题标题】：Angular - click event on select option elementAngular - 选择选项元素上的单击事件
【发布时间】：2018-02-06 14:23:48
【问题描述】：

在我的 Angular 4 应用程序中，我使用了一个选择元素。单击选择元素中的一个选项，我想打开一个对话框。但是，如果单击该选项，我找不到如何查询的解决方案。我在选择中只有一个选项，因此我无法查询该值是否已更改，因为该值无法更改。

选项元素中是否有可能发生点击事件？

【问题讨论】：

请添加一些代码来演示您要完成的工作、尝试的内容以及失败的地方。
*ngFor 带索引？将您的索引let object = this.objectList[i] 加载到对话框中。

标签： html angular typescript

【解决方案1】：

<option>的点击事件无法监听。

你可以使用

<select ngModel (ngModelChange)="mySelectHandler($event)">
  <option *ngFor="let value of options" [ngValue]="value">{{value.text}}</option>
</select>

选择选项后执行代码。

【讨论】：

【解决方案2】：

您可以添加禁用选项，以便使用更改事件，例如：

<select #selectList (change)="setValue(selectList.value)">
                      <option value="null" disabled>Select a Value</option>
                      <option  *ngFor="let o of Options" value="{{ o | json }}">{{c.name}}</option>
</select>

【讨论】：

【解决方案3】：

<nz-select <!-- begin snippet: js hide: false console: true babel: false -->

  ngModel="bank"
  nzAllowClear
  nzPlaceHolder="Select Bank"
  (ngModelclick)="onSelectedBank($event)"
  >
  <nz-option *ngFor="let bank of bankList" nzValue="{{ bank.id }}" nzLabel="{{ bank.bank_name }}"></nz-option>
</nz-select>

【讨论】：