如何触发单击事件以从 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>

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

<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

以下是获取所选值的方法：

<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来获取选中的id。

由于某种原因，click 事件不能直接作用于 option 标记，至少对于来自 html 的默认选择标记。

如果您需要更多可能的解决方案来从select 获取值，也可以使用here is a link。