如何使用 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
【讨论】:
嗨,你能看看我编辑过的问题吗 好吧,当我这样调用时它不起作用d()
语句,并执行存储在变量d
中的函数,该函数是数组的函数之一。
以上是关于如何使用 Angular 6 在 HTML 元素上绑定动态函数?的主要内容,如果未能解决你的问题,请参考以下文章
如何在具有 null 值的 Angular 选择元素上使用默认的“请选择”选项进行验证?
如何在 Angular 6 中选择原生元素的 ContentChild?
当我将元素设置为 Angular 6 中可编辑的内容时,如何设置元素的焦点?