Angular 5点击多个按钮仅触发EDM按钮事件问题排查求助

我来帮你梳理下这个问题的常见原因和解决办法，应该是模板绑定或者函数逻辑出了问题：

1. 检查模板中按钮的点击事件参数 #

最常见的情况是所有按钮的(click)事件都传递了同一个'EDM'参数，比如你可能不小心把四个按钮的点击绑定都写成了：

<button (click)="doSearch('EDM')">...</button>

正确的写法应该是给每个按钮传递对应的分类参数，比如：

<!-- grid for music -->
<ng-container *ngIf="show" >
  <div class="mdl-grid">
    <!-- EDM按钮 -->
    <div class="mdl-cell mdl-cell--1-col">
      <button (click)="doSearch('EDM')" class="mdl-button mdl-js-button">EDM</button>
    </div>
    <!-- Rock按钮 -->
    <div class="mdl-cell mdl-cell--1-col">
      <button (click)="doSearch('Rock')" class="mdl-button mdl-js-button">Rock</button>
    </div>
    <!-- 其他两个按钮同理，传递对应参数 -->
    <div class="mdl-cell mdl-cell--1-col">
      <button (click)="doSearch('Jazz')" class="mdl-button mdl-js-button">Jazz</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button (click)="doSearch('Pop')" class="mdl-button mdl-js-button">Pop</button>
    </div>
  </div>
</ng-container>

如果是用*ngFor循环生成按钮，要确保正确使用循环变量传递参数：

// 组件.ts中定义分类数组
genres = ['EDM', 'Rock', 'Jazz', 'Pop'];

<ng-container *ngIf="show" >
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--1-col" *ngFor="let genre of genres">
      <button (click)="doSearch(genre)" class="mdl-button mdl-js-button">{{ genre }}</button>
    </div>
  </div>
</ng-container>

2. 检查doSearch函数的判断逻辑 #

如果模板参数没问题，那大概率是函数内部的判断逻辑出错了：

• 比如只写了EDM的判断分支，其他分支被遗漏或者写错了
• 或者不小心把判断条件写成了赋值语句（比如if (genre = 'EDM')，这会把genre强制设为'EDM'，导致所有分支都走EDM）

正确的函数写法示例：

doSearch(genre: string) {
  // 先给last_search赋值
  this.last_search = genre;
  
  // 用switch或者else if处理不同分类逻辑
  switch(genre) {
    case 'EDM':
      console.log('i am edm');
      // EDM相关逻辑
      break;
    case 'Rock':
      console.log('i am rock');
      // Rock相关逻辑
      break;
    case 'Jazz':
      console.log('i am jazz');
      // Jazz相关逻辑
      break;
    case 'Pop':
      console.log('i am pop');
      // Pop相关逻辑
      break;
    default:
      console.log('未知分类');
  }
}

3. 其他可能的小问题 #

• 检查按钮是否有重复的id或者name属性，导致事件绑定冲突
• 确认last_search变量没有在其他地方被意外重置为'EDM'

你可以先对照这几点排查，应该就能找到问题所在啦～

内容的提问来源于stack exchange，提问作者asus