按钮上的侦听器事件

Question

我想检查是否点击了按钮

<ul>
<li *ngFor="let p of arrray; let i = index"  >
<button class="btn btn-success"  (click)="onLoveIt(i)" >Love it!</button> &nbsp;
</li>
</ul>

Answer 1

改用onLoveIt(this(。这样，您将具有对发送请求的元素的引用。

Answer 2

从您的问题中，您将 li 的索引传递给 onLoveIt(i) 方法。因此，我知道您没有在p对象中使用属性来确定单击了哪个按钮(或修改了哪个属性(。

我们可以创建另一个包含布尔值的数组并基于它更改 css，例如：

// in your component and after the initilization of your `arrray`
this.liChecked = arrray.map(e => false);

onLoveIt(i) {
...
this.liChecked[i] = true;
}

<ul>
  <li *ngFor="let p of arrray; let i = index"  [ngStyle]="{'background-color': liChecked[i] ? 'red' : 'green'}">
   <button class="btn btn-success"  (click)="onLoveIt(i)" >Love it!</button>
  </li>
</ul>