Div 上的 Onclick 不适用于 Angular - 9

Question

这是我的 HTML

<mat-grid-list cols="3" rowHeight="150px">
 <mat-grid-tile
    *ngFor="let tile of tiles;index as j;"
     [colspan]="tile.cols"
     [rowspan]="tile.rows"
     >
   <div (onclick)="openbox();" style="z-index: 2">
                                       
          {{tile.text}}<br>
          <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1027&q=80" height="200px" width="260px">
   </div>
    </mat-grid-tile>
</mat-grid-list>

Ts

export class RegistrationComponent implements OnInit {
...
 openbox(){
    console.log('clicked')
  }
...
}

我尝试过的事情：

style="z-index: 2; position: relative;"
隐身

浏览器 Chrome Angular-9
我的目标是获取点击的 mat-grid-tile 的索引有没有其他方法可以做到这一点？
谢谢

Answer 1

您应该使用 (click) 事件。onClick不起作用，因为 Angular Compiler 无法识别它，这适用于所有带有 prefix 的浏览器事件on。如果不想在 Angular 中使用该事件，则需要删除on.

<div (click)="openbox();" style="z-index: 2">
   ...
</div>