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

Posted

技术标签:

【中文标题】如何使用 Angular 6 在 HTML 元素上绑定动态函数?【英文标题】:how to bind dynamic function on HTML element using angular 6? 【发布时间】: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()">

Demo

【讨论】:

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

以上是关于如何使用 Angular 6 在 HTML 元素上绑定动态函数?的主要内容,如果未能解决你的问题,请参考以下文章

Angular 6 +从文档中获取具有类名的元素并更改样式

如何在具有 null 值的 Angular 选择元素上使用默认的“请选择”选项进行验证?

如何在 Angular 6 中选择原生元素的 ContentChild?

当我将元素设置为 Angular 6 中可编辑的内容时,如何设置元素的焦点?

如何在 html 元素属性中使用 Angular 2 外推?

Angular 6 如何在指令中添加多种样式?样式元素未与指令 (addClass) 连接