如何在选择下拉列表（Angular）中执行点击事件？答案

【问题标题】：How can I perform click events in a select dropdown (Angular)?如何在选择下拉列表（Angular）中执行点击事件？
【发布时间】：2020-10-09 13:46:22
【问题描述】：

我有两个按钮（月、年）对不同的事件做出反应……现在我想将这些事件插入到一个选择中。你能告诉我这是如何工作的吗？

我的代码：

// Solution with buttons
<button class="menu-button" type="button" mat-raised-button [ngClass]="{'active': selectedMenuLeft === 'monthButton'}" (click)="activateButton(1)">Monat</button>
<button class="menu-button" type="button" mat-raised-button [ngClass]="{'active': selectedMenuLeft === 'yearButton'}" (click)="activateButton(2)">Jahr</button>
 activateButton(check) {
    if (check === 1) {
      this.selectedMenuLeft = 'monthButton';
      this.navService.sendNavEventUpdate('month');
    } else {
      this.selectedMenuLeft = 'yearButton';
      this.navService.sendNavEventUpdate('year');
    }
  }

// The same with a select. What do I have to optimize?
<select class="upload_slc" required title="">
<!-- Options -->
<option value="content" *ngFor="let navValue of menuLeftMobile" [value]="navValue">
{{ navValue }}
</option>
</select>
// Menu left in mobile
  menuLeftMobile: Array<string> = ['Monat', 'Jahr'];

【问题讨论】：

标签： html angular dom-events eventemitter

【解决方案1】：

您可以通过 two-way binding 到 ngModel 指令来做到这一点。

控制器

menuLeftMobile: Array<string> = ['Monat', 'Jahr'];
selected: string;

onChange() {
  if (selected === 'Monat') {
    this.selectedMenuLeft = 'monthButton';
    this.navService.sendNavEventUpdate('month');
  } else {
    this.selectedMenuLeft = 'yearButton';
    this.navService.sendNavEventUpdate('year');
  }
}

模板

<select class="upload_slc" required title="" [(ngModel)]="selected" (change)="onChange()">
  <!-- Options -->
  <option value="content" *ngFor="let navValue of menuLeftMobile" [value]="navValue">
  {{ navValue }}
  </option>
</select>

现在您不需要额外的变量selectedMenuLeft 来设置类。您可以在模板中使用selected。

<div [ngClass]="{'active': selected === 'Monat'}"></div>

【讨论】：

【解决方案2】：

最简单的方法是

<select #mySelect (change)='onOptionsSelected(mySelect.value)'>

功能会是这样的

 activateButton(check) {
    if (check === "Monat") {
      this.selectedMenuLeft = 'monthButton';
      this.navService.sendNavEventUpdate('month');
    } else {
      this.selectedMenuLeft = 'yearButton';
      this.navService.sendNavEventUpdate('year');
    }
  }

希望这对你有用

【讨论】：

【解决方案3】：

<mat-select placeholder="Select Menu" name="nav_value" 
    (selectionChange)="menuChangeAction(nav_value)"
        [(ngModel)]="nav_value">
        <mat-option *ngFor="let navValue of menuLeftMobile"
          [value]="navValue">{{ zone.label }}</mat-option>
      </mat-select>

在您的组件中，您可以执行以下操作：

nav_value: any;

menuChangeAction(value) {
    console.log(value) // you will get your selected value here
}

【讨论】：