javascript - 让函数在点击时运行

Question

我想让图标在点击时闪烁

我的ts文件

  onBlink() {
    this.action = true;
    setTimeout(() => {
      this.action = false;
    }, 1000)
    return this.action
  };

我的 HTML 文件action 在 ts 中声明为任意类型

<td mat-cell *matCellDef="let element">
 <mat-icon (click)="element.action = onBlink()" class="icon bulb" 
     [ngClass]="{
     'blink_me': element.action ,
     '': element.action === false}
     ">wb_incandescent</mat-icon>
</td>

Answer 1

您需要将元素从 html 传递到 ts:

<mat-icon (click)="onBlink(element)" class="icon bulb" [ngClass]="element.action ? 'blink_me': ''">wb_incandescent</mat-icon>

然后在你的ts中:

onBlink(element) {
  element.action = true
  console.log('blink true');
  setTimeout(() => {
    element.action = false;
    console.log('blink false')
  },1000)
}