0

我有带有单选按钮的简单组件：

html:

<div class="rate">
  <input type="radio" id="star5" name="rate" value="5" (change)="onRateChange($event.target.value)"/>
  <label for="star5" title="text">5 stars</label>
...
</div>

TS：

@Output() rateSelected = new EventEmitter<number>();

public onRateChange(value: number) {
    this.rateSelected.emit(value);
  }

当我像这样使用它时：

html:

<form>
  <h1>Rate one:</h1>
  <app-stars (rateSelected)="onRateOneSelected($event)"></app-stars>

  <h1>Rate two:</h1>
  <app-stars (rateSelected)="onRateTwoSelected($event)"></app-stars>
</form>

TS：

  onRateOneSelected(rate: number) {
    alert('app ' + rate); // this one is always triggered
  }

  onRateTwoSelected(rate: number) {
    alert('comfort ' + rate);
  }

无论我使用第一个还是第二个评分总是onRateOneSelected触发事件。怎么了？我该如何解决？

4

0 回答 0