Angular 2（点击）在 Chrome 中不起作用

Question

我在我的 html 模板中使用这样的东西：

 <div class="input-group" id="geo-type">
        <div class="input-label" [style.color]="geographicLocationColor">{{geoLocationTitle}}</div>
        <select class="dropdown-toggle dropdown-select" role="button" aria-haspopup="true" aria-expanded="false">
            <option value="" selected hidden>{{geographicLocationPl}}</option>
            <option *ngFor="#geo of geographicLocations" (click)="locationOnSelect(geo)">{{geo.description}}</option>
        </select>
    </div>

如果我使用 firefox 在下拉菜单中选择某些内容，则会调用方法 locationOnSelect（我正在执行其他一些由位置标识的 GET），但在 Chrome 中不会发生任何事情 - 方法 locationOnSelect 没有被调用。

我的 IE（版本 11）也有问题，locationOnSelect 没问题，但在下一个 GET（用户在第二个下拉菜单中选择某些内容）时，IE 崩溃 - 停止工作。所以我的应用程序 100% 只在 Firefox 中工作。有什么想法吗？

Answer 1

您需要在<select> 上添加(click)="..." 或(change)="..." 而不是<option>

另见Click event on select option element in chrome

<div class="input-group" id="geo-type">
    <div class="input-label" [style.color]="geographicLocationColor">{{geoLocationTitle}}</div>
    <select [ngModel]="selectedGeo" (ngModelChange)="locationOnSelect($event)"
       class="dropdown-toggle dropdown-select" role="button" aria-haspopup="true" aria-expanded="false">
        <option selected hidden>{{geographicLocationPl}}</option>
        <option *ngFor="#geo of geographicLocations" [ngValue]="geo">{{geo.description}}</option>
    </select>
</div>