Question

我正在使用Angular 7，并试图读取我单击的元素的“数据索引”属性。

这是元素的HTML：

<div class="carddiv" 
     *ngFor="let card of cardNames; index as i" [attr.data-index]="i" 
     (click)="onCardClick($event)">

  <mat-card> ...
...
</div>

..

我的代码：

onCardClick(event : any) : void
{
    let elementId: any = event.target.dataset.index;
    if(elementId)
    {
      console.log(elementId);
    }
    else
    {
      console.log("in else");
    }
  }

有1个以上的项目，因此接收到的值不为0，但始终输出“ in else”。为什么会这样？

Answer 1

您很可能会得到undefined，因为event.target并不指向您的<div class="carddiv"元素，而是指向其中一个孩子。

您可以使用event.currentTarget来从声明了dataset属性的元素中读取data。

onCardClick(event : any) : void {
    let elementId: any = event.currentTarget.dataset.index;
                               ^^^^^^^^^^^^^

Answer 2

您只需在点击回调函数中传递对象及其索引，如下所示：

<div class="carddiv" 
     *ngFor="let card of cardNames; index as i" [attr.data-index]="i" 
     (click)="onCardClick(card, i)">
...
</div>

您的函数实现：

onCardClick(card: any, index: number) : void
{
    // Do your thing
}

无法访问Angular的data- *属性

2 个答案: