Question

我有一个包含4个按钮的网格，一旦点击其中一个按钮，它将调用一个名为doSearch的函数，该函数检查单击了哪个按钮，并根据该值为last_search值分配字符串。

然而，当我点击四个按钮中的任何一个时，我似乎总是只按下edm按钮并读取“我是edm＆＃39;控制台。

有人可以解释为什么会这样吗？

HTML

<!-- grid for music -->
<ng-container *ngIf="show" >
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="edm-btn" type="submit" (click)="doSearch($event)">EDM</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="house-btn" type="submit" (click)="doSearch($event)">House</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="pop-btn" type="submit" (click)="doSearch($event)">Pop</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="dubstep-btn" type="submit" (click)="doSearch($event)">Dubstep</button>
    </div>
  </div>
</ng-container>

功能代码

doSearch(event): void {

    if (document.getElementById('edm-btn')) {
      this.last_search = 'edm';
      console.log('i am edm');
    } else if (document.getElementById('house-btn')) {
      this.last_search = 'house';
      console.log('i am house');
    } else if (document.getElementById('pop-btn')) {
      this.last_search = 'pop';
      console.log('i am pop');
    } else if (document.getElementById('dubstep-btn')) {
      this.last_search = 'dubstep';
      console.log('i am dubstep');
    }
}

FIX：

而不是传递按钮的id，我决定将字符串直接传递给doSearch的函数调用

HTML

<!-- grid for music -->
<ng-container *ngIf="show" >
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="edm-btn" type="submit" (click)="doSearch('edm')">EDM</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="house-btn" type="submit" (click)="doSearch('house')">House</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="pop-btn" type="submit" (click)="doSearch('pop')">Pop</button>
    </div>
    <div class="mdl-cell mdl-cell--1-col">
      <button mat-button id="dubstep-btn" type="submit" (click)="doSearch('dubstep')">Dubstep</button>
    </div>
  </div>
</ng-container>

功能

doSearch(category): void {

    console.log(JSON.stringify(category, null, 2));
    if (category === 'edm') {
      this.last_search = 'edm';
      console.log('i am edm');
    } else if (category === 'house') {
      this.last_search = 'house';
      console.log('i am house');
    } else if (category === 'pop') {
      this.last_search = 'pop';
      console.log('i am pop');
    } else if (category === 'dubstep') {
      this.last_search = 'dubstep';
      console.log('i am dubstep');
    }
}

Answer 1

这是因为无论你通过什么赛事，你的第一个条件总是如此。您正在传递事件，而不是实际数据，以及检查元素是否存在，即使它已经存在。

Answer 2

你实际上不需要在这里，否则就足够了：

public doSearch(category: string) { 
  this.last_search = category;
}

Javascript / Angular 5 - 单击多个按钮只会影响一个按钮

2 个答案: