打字稿中的复选框单击会生成错误

Question

我在表格（打字稿）中生成复选框，如下所示：

  generateTable(): void {
    var table = document.getElementById("table1") as HTMLTableElement;
    if (table.childElementCount == 2) {
      for (var x = 0; x < 2; x++) {
        var newRow = table.insertRow(x+1);
        var newCell = newRow.insertCell(0);
        newCell.innerHTML = "<input type='checkbox' onclick='toggleSelection()'>";
      }
    }
  }

toggleSelection() { 
    console.log("Test");
  }

现在，只要我单击其中一个复选框，我就会收到以下控制台错误：

未捕获的引用错误：toggleSelection 未在 HTMLInputElement.onclick ((index):142:2) 处定义

我不知道如何处理这个错误。似乎函数“toggleSelection”没有正确定义。非常感谢您的帮助！

Answer 1

您的代码有两个主要问题：

1. 通过

   innerHTML

   插入动态代码将不允许您使用事件绑定。事件绑定仅适用于组件中定义的模板；

2. 您不应该使用

   onclick

   。相反，您应该使用 Angular 的事件绑定

   (click)

   。这允许 Angular 调用组件中定义的函数。

考虑到这一点，我建议对您的代码进行一些更改以使其正常工作（这只是建议的方法）：

1. 在模板中使用

   *ngFor

   而不是

   innerHTML

   :

    <table>
    <thead>
        <th>Input</th>
    </thead>
    <tbody>
        <tr *ngFor="let item of items">
            <input type='checkbox' (click)='toggleSelection()'>
        </tr>
    </tbody>
   

2. 在您的组件中创建一个公共属性。我称它为

   items

   ：

   public items: any = [];

3. 更改您的

   generateTable()

   功能。您只需将新项目推送到

   items

   列表，您的模板就会自动更新。您也可以在此处添加您的业务规则。

   generateTable(): 无效 { this.items.push(1); }