Angular - (click) -Ereignis für eine generierte Tabellenzelle

Question

Ich habe versucht, ein (click) -Ereignis für eine Zelle in einer dynamisch generierten Tabelle hinzuzufügen.

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; 
    }; 

Wenn ich das tue, bekomme ich diesen Fehler:

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

Wie könnte ich dieses Ereignis hinzufügen, vorausgesetzt, ich brauche diese Tabelle zu generieren?

Fühlen Sie sich frei, für weitere Details zu fragen, wenn nötig.

Answer 1

Hier ist, wie ich es gelöst:

Vorlage:

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

Komponente:

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); 
    } 
    };