javascript - 您可以在选项元素上设置点击事件吗？ ( Angular v2.0.0-beta.0)

Question

我正在处理 optgroup 元素，我希望从一组中选择 option 元素以做出不同的 react 并传递与其他元素不同的数据。

但是我设置的处理程序方法不会在这里触发。我是不是遗漏了什么，或者在不支持的选项元素上设置点击事件？

import {Component} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {City, County, RegionalData} from './interfaces';
import {api} from './api.service';

@Component({
    selector: 'geo-selector',
    template: `
        <div>
            <select name="region-selector">
                <option disabled="disabled" selected="selected">Select a city/county</option>
                <optgroup label="Cities">
                    <option *ngFor="#city of cities" [value]="city" (click)="onCitySelect(city)">{{city.name}}</option>
                </optgroup>
                <optgroup label="Counties">
                    <option *ngFor="#county of counties" [value]="county" (click)="onCountySelect(county)">{{county.name}}</option>
                </optgroup>
            </select>
            <label for="">Zip Search</label>
            <input type="text" name="zip-search"/>
        </div>
                        `,
    providers: [api],
    directives: [NgFor]
})

export class GeoSelector {
        public cities: City[];
        public counties: County[];
        public selectedRegion: any;

        constructor(private _api:api) {
            this.getRegions();
        }

        getRegions(): void {
            this._api.getRegions().then((data: RegionalData) => {
                let cities = this.cities = data.cities;
                let counties = this.counties = data.counties;
                this.selectedRegion = cities[0] ? cities[0] : counties[0];
            });
        }

        onCitySelect(region) : void {
            console.log(region);
        }


        onCountySelect(region): void {
            console.log(region);
        }

}

Answer 1

option 元素不会触发点击事件。这不是 Angular2 的限制，而是浏览器的限制。您可以改为监听 select 元素的 change 事件，然后从那里找出单击了哪个 option 元素。