Как использовать нажмите на выпадающий список в angular?

Question

<div>
    <label> Categories </label>
    <select>
        <option *ngFor = "let category of categories"
                [value] = "category" 
                (click) = "onCategorySelected( category.name )">                
                {{category.name}}

        </option>       
    </select>
</div>

Эта функция onCategorySelected просто не вызывается.
Я должен передать ей выбранное пользователем значение из выпадающего списка.
Какой выход?

Answer 1

Тег option не поддерживает событие click. Вместо этого вы можете использовать событие change для тега select. Вы также назначаете объект атрибуту value в теге option, что неверно. Чтобы назначить объект в качестве значения, вы должны использовать ngValue, если не присваиваете уникальный идентификатор вашему value, например. [value]="category.id".

Попробуйте вместо этого.

<select (change)="onCategorySelected($event.target.value)">    <!-- If you are using ngModel or formControl, get the value from there instead of using $event.target.value -->
    <option *ngFor="let category of categories" [ngValue]="category">
        {{category.name}}
    </option>
</select>

Answer 2

Используйте этот способ

<select (change)="selectionChanged($event.target.value)">
    ....
</select>

$event.target.value отправит значение параметра, который вы изменили