Question

我正在使用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>

Answer 1

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

(click)="clickEvent(i)"

Answer 2

您可以使用通过DOMStringMap属性访问的dataset来获取数据属性值：

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

或标准getAttribute方法：

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

以下是文档中的引用：

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

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

Answer 3

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

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

clickEvent($event, block) {
  alert(block);
}

点击时的Angular 2捕获按钮属性

3 个答案: