Question

我创建了一个表，我可以在调用addRow（）函数时为表生成一个新行。行中生成的按钮无法调用myFunc（）。我怎样才能做到这一点。

＆＃13;

batch_size=40*8=320

＆＃13;

addRow(){
  let table = document.getElementById("tableData");
  let rowcount = table.rows.length;
  let row = table.insertRow(rowcount);
  row.insertCell(0).innerHTML= rowcount;
  row.insertCell(1).innerHTML= 'some fake data';
  row.insertCell(2).innerHTML= '<button (click)="myFunc()">click</button>';
  }

  myFunc(){
    alert()
  }

＆＃13;

Answer 1

您似乎无法理解角度的核心原则，在您不必要的时候不要直接操纵DOM。您应该将行存储在一个数组中，然后在模板中循环它。

如果你想添加一行，只需在数组中添加一个新元素，angular将完成其余的工作。

组件模板：

<table>
  <tr>
    <th>S.No.</th>
    <th>Name</th>
    <th>Operation</th>
  </tr>
  <tr *ngFor="let row of myRows; let i = index">
    <td>{{ i + 1 }}</td>
    <td>{{ row.data }}</td>
    <td>
      <button (click)="myFunc()">click</button>
    </td>
  </tr>
</table>

在你的组件中：

public myData: { data: string }[] = [];

public addRow() {
  this.myData = this.myData.concat({
    data: 'some fake data'
  });
}

我强烈建议您阅读docs的基础部分。

Answer 2

使(click)或类似Angular特定内容适用于动态添加HTML的唯一方法是在运行时编译组件。

您仍然可以执行类似

的操作

constructor(private elRef:ElementRef) {}

addRow() {
  let table = document.getElementById("tableData");
  let rowcount = table.rows.length;
  let row = table.insertRow(rowcount);
  row.insertCell(0).innerHTML= rowcount;
  row.insertCell(1).innerHTML= 'some fake data';
  row.insertCell(2).innerHTML= '<button (click)="myFunc()">click</button>';

  this.elRef.nativeElement.querySelector('button').addEventHandler('click', this.clickHandler.bind(this));
}

Answer 3

使用render2角度方式来完成它。

@ViewChild('myButton') myButton;
  let simple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {

                console.log('Clicking the button', evt);
                this.myFunc() //your func

            });

请参阅LINK以获取更多信息。

如何在角度2中为动态生成的按钮分配功能

3 个答案: