angular - 具有动态函数调用的 ngFor
问题描述
我有一个名为“Action”的对象数组。每个动作都有 2 个参数:函数名和一个布尔值(现在不重要)。
let actionsArray: Action[] = [{name:"save",enabled:true},{name:"describe",enabled:true},{name:"delete",enabled:true}]
然后我使用 ngFor 来显示函数列表。我想要做的是将每个动作的“点击”事件动态绑定到它的功能。
<li *ngFor="let action of actionsArray">
<button (click) ="this[action.name]()"> {{action.name}} </button>
</li>
我尝试了很多方法都没有成功。
解决方案
我用你的代码创建了笔,它可以工作。我还添加了另一种switch/case
方法。
@Component({
selector: 'my-app',
template: `
<li *ngFor="let action of actionsArray">
<button (click) ="[action.name]()"> {{action.name}} </button>
<button (click) ="callAction(action.name)"> {{action.name}} </button>
</li>
`
})
class AppComponent {
actionsArray: {name: string, enabled: boolean}[] = [{name:"save",enabled:true},{name:"describe",enabled:true},{name:"delete",enabled:true}]
callAction(actionName: string) {
switch(actionName){
case 'save' : return this.save();
case 'describe' : return this.describe();
case 'delete' : return this.delete();
}
}
save() {
alert('save');
}
describe() {
alert('describe');
}
delete() {
alert('delete');
}
}
推荐阅读
- pdf - 如何获得 cfdocument 的输出
- sql-server - 我可以对多个代码页使用 CHAR 数据类型吗?
- compilation - 如何预处理 OpenCL 内核?
- javascript - jQuery - 选择值等于的元素
- maven - 在eclipse中使用tomcat9作为部署服务器作为插件
- python - PyPI bezier 0.8.0:绘制平滑贝塞尔曲线所需的最少点数?
- messagebroker - 在消息代理计算节点上使用 ESQL 进行 xml 到 xml 字段属性转换
- ios - 当 Firebase 查询限制超过 9 时 iOS 应用程序崩溃
- python - 从python 3中的列表中删除特定元素
- api - 列出 Jenkins 下的所有文件夹及其路径