Angular 单击时角度2捕捉按钮属性

我用的是Angular cli

我有一个简单的数组，我循环通过并作为按钮输出

我在按钮上添加循环索引作为属性

单击按钮属性时如何获取按钮属性

    // component
    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })

    export class AppComponent {
      title = 'app works!';

      blocks: string[] = ['Red','Green','Blue','Yellow','White'];

      constructor(){}

      clickEvent($event){
        alert($event.target.attr.data-index);
      }

    }




    // component.html
    <div class="blocks">

      <div *ngFor="let block of blocks; let i=index">
        <button (click)="clickEvent($event)" [attr.data-index]="i">{{block}}</button>
      </div>

    </div>

//组件
从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
title='appworks！'；
块：字符串[]=['红色'，'绿色'，'蓝色'，'黄色'，'白色']；
构造函数（）{}
clickEvent（$event）{
警报（$event.target.attr.data索引）；
}
}
//component.html
{{block}}

您可以使用accessible through属性获取数据属性值：

clickEvent($event){
    alert($event.target.dataset.index);
}

或标准方法：

以下是文件中的报价：

在JavaScript中读取这些属性的值也是非常重要的 简单。您可以使用getAttribute（）及其完整的HTML名称来读取 但是标准定义了一种更简单的方法：可以使用DOMStringMap 通过数据集属性读取

要通过dataset对象获取数据属性，请获取属性 在属性名称中数据之后的部分-（请注意，破折号是 转换为camelCase）

您可以使用accessible through属性获取数据属性值：

clickEvent($event){
    alert($event.target.dataset.index);
}

或标准方法：

以下是文件中的报价：

在JavaScript中读取这些属性的值也是非常重要的 简单。您可以使用getAttribute（）及其完整的HTML名称来读取 但是标准定义了一种更简单的方法：可以使用DOMStringMap 通过数据集属性读取

要通过dataset对象获取数据属性，请获取属性 在属性名称中数据之后的部分-（请注意，破折号是 转换为camelCase）

---

不需要分配属性，然后从属性中读取。您可以直接使用该值

(click)="clickEvent(i)"

---

不需要分配属性，然后从属性中读取。您可以直接使用该值

(click)="clickEvent(i)"

---

如果您只需要数组中的当前项，则可以将其发送到单击处理程序：

<button (click)="clickEvent($event, block)">{{block}}</button>

---

如果您只需要数组中的当前项，则可以将其发送到单击处理程序：

<button (click)="clickEvent($event, block)">{{block}}</button>