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

您需要在(click)="..."上添加(change)="..."或<select>，而不是<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>

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

1 个答案: