Question

我试图为表的tr td值编写click事件。我已经生成了一个表，并且有tableid。如果我单击第一列td值要显示警报，我们该怎么办？有什么解决方案吗？< / p>

请不要编写任何内联onclick事件。我要在app.component.ts文件中编写

。

示例：

app.component.html：

<custom-table id="tableId">
     <table>
      <thead>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </thead>
      <tr>
        <td>123456</td> ---->If i click this i want to show alert with this value
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>253689</td>---->If i click this i want to show alert with this value
        <td
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr> 
     </table>
<custom-table>

app.component.ts：

ngOnInit(){

???
}

Answer 1

在app.component.html内，向表元素添加模板引用变量（使用#）。

<table #mytable ... >

在app.component.ts中，将模板引用变量与ViewChild链接，然后在click内安装ngAfterViewInit侦听器。

import {Component, ViewChild, AfterViewInit, ElementRef} from '@angular/core';

export class AppComponent implements AfterViewInit {

    @ViewChild('mytable', {static: false}) tableRef: ElementRef<HTMLTableElement>;

    ngAfterViewInit() {
        for (let row of this.tableRef.nativeElement.rows) {
            const firstCell = row.childNodes.item(0);
            firstCell.addEventListener('click', () => alert(firstCell.textContent));      
        }
    }

StackBlitz

更新

如果要在Angular 6、7和8中进行此操作，可以使用document.getElementById('tableId')而不是ViewChild。

请看看这个StackBlitz

如何编写角事件6中动态生成的表的第一个td值的单击事件

1 个答案: