如何触发单击事件以从 Angular 中的下拉列表中进行选择

Question

我有一个从 ngFor 得到的列表组，如下所示。通过单击任何列出的项目，我可以触发单击事件并按预期进行选择。

<div>
    <ul class="list-group my-3">
        <li class="list-group-item" 
        *ngFor="let category of categories"
        [class.active]="category.id === this.shopParams.categoryId"
        [value]="category.id"
        (click)="onCategorySelected(category.id)"
        >
        {{category.name}}
        </li>                
    </ul>
</div>

但是，一旦我将列表组更改为下拉列表，点击事件似乎从未触发，尽管可以通过从下拉列表中单击来选择项目。

<div>                    
      <select name="cars" class="custom-select mb-3">
          <option *ngFor="let category of categories" 
              [class.active]="category.id === this.shopParams.categoryId"
              [value]="category.id"
              (click)="onCategorySelected(category.id)"
              >
              {{category.name}}                       
          </option>                    
      </select>
 </div>

这是我在 component.ts

中的点击功能

onCategorySelected(categoryId: number) {
    const params = this.shopService.getShopParams();
    params.categoryId = categoryId;
    this.shopService.setShopParams(params);
}

谁能指出问题所在并帮我改正一下吗？

Answer 1

以下是获取 selected 值的方法：

<div>
    <select name="cars" class="custom-select mb-3" (change)="onCategorySelected($event.target.value)">
          <option *ngFor="let category of categories" 
              [value]="category.id"
              >
              {{category.name}}                       
          </option>                    
      </select>
</div>

注意 select 上的 change 事件。我在 onCategorySelected() 方法中传递 $event.target.value 以获取 selected id。

出于某种原因，click 事件不能直接作用于 option 标签，至少对于来自 html.[=19 的默认 select 标签是这样=]

还有如果您需要更多可能的解决方案来从 select 中获取值。

如何触发单击事件以从 Angular 中的下拉列表中进行选择

How to fire a click event to make a selection from a dropdown list in Angular

html

mouseclick-event

typescript

dropdown

angular