如何使用 Angular 6 在 HTML 元素上绑定动态函数？

【问题标题】：how to bind dynamic function on HTML element using angular 6?如何使用 Angular 6 在 HTML 元素上绑定动态函数？
【发布时间】：2019-08-05 06:04:19
【问题描述】：

我正在尝试将事件绑定到动态创建的元素上。我非常成功，但我无法将函数绑定到事件。这是我的代码

.ts 代码

 data = ['fn1()', 'fn2()', 'fn3()'];
 fn1() { alert(1) }
  fn2() { alert(2) }
  fn3() { alert(3) }

html代码

   table>
  <ng-container *ngFor='let d of data'>
    <tr (click)=d>
      <td>
        :) !!!
      </td>
    </tr>
  </ng-container>

但是，当我静态添加函数时，它会被调用，即。

<table>
  <ng-container *ngFor='let d of data'>
    <tr (click)=fn1()>
      <td>
        :) !!!
      </td>
    </tr>
  </ng-container>

</table>

这行得通，有人可以帮我吗？

【问题讨论】：

【解决方案1】：

您需要一个函数数组，而不是字符串数组。并且您想在单击 div 时调用该函数：

打字稿：

fn1 = () => { alert(1) };
fn2 = () => { alert(2) };
fn3 = () => { alert(3) };
data = [this.fn1, this.fn2, this.fn3];

HTML：

<div (click)="d()">

【讨论】：

嗨，你能看看我编辑过的问题吗
好吧，当我这样调用时它不起作用
单击演示链接，您会发现它确实有效。因此，如果它不适用于您的代码，则意味着您的代码与我的答案不同。像我一样发布一个完整的 stackblitz 示例。
请您解释一下这是如何工作的。感谢您的帮助
它创建一个函数数组，对其进行迭代，并为每个函数创建一个 div。点击div时，感谢@987654324@，执行d()语句，并执行存储在变量d中的函数，该函数是数组的函数之一。