Angular-生成的表格单元格上的(单击)事件 [英] Angular - (click) event on a generated table cell

问题描述

我一直在尝试在动态生成的表格中的单元格上添加(点击)事件.

I've been trying to add a (click) event on a cell in a dynamically generated table.

HTMLtoAdd:any;
  @Input() roles:string;
  ngOnInit() {
    let alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    let table = document.createElement('table');
    for (let i=0;i<10;i++){
      let newRow = document.createElement('tr');
      for (let j=0;j<10;j++) {
        let newCell = document.createElement('td');
        let cellId = alphabet[i]+j;
        newCell.setAttribute("id",cellId);
        newCell.setAttribute("(click)","alert(this.id)");
        newRow.appendChild(newCell);
      }
      table.appendChild(newRow);
    }
    this.HTMLtoAdd = table.outerHTML;
  };

执行此操作时，出现此错误:

When I do this, I get this error :

'setAttribute' on 'Element': '(click)' is not a valid attribute name.

如果需要生成该表，如何添加此事件?

How could I add this event, provided I need to generate that table ?

如有需要，随时询问更多细节.

Feel free to ask for more details if needed.

推荐答案

这是我解决的方法:

模板:

<table>
  <tr *ngFor="let row of columns">
    <td *ngFor="let cell of rows" (click)="log(row+cell)"></td>
  </tr>
</table>

组件:

columns:string[]=[];
  rows:number[]=[];
ngOnInit() {
    let gridSize = 10;
    for (let i=0; i<gridSize;i++){
      this.columns.push(String.fromCharCode(65+i));
    };
    for (let i=0; i<gridSize;i++){
      this.rows.push(i);
    }
  };

这篇关于Angular-生成的表格单元格上的(单击)事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！