ngFor 与动态函数调用

Question

我有一个名为"Action"的对象数组。每个动作都有 2 个参数：函数名称和布尔值(现在不重要(。

let  actionsArray: Action[] = [{name:"save",enabled:true},{name:"describe",enabled:true},{name:"delete",enabled:true}]

我使用 ngFor 来显示函数列表。我想做的是将每个动作的"click"事件动态绑定到其函数。

<li *ngFor="let action of actionsArray">
<button (click) ="this[action.name]()"> {{action.name}} </button>
</li>

我尝试了很多方法，但没有任何成功。

Answer 1

我用你的代码创建了笔，它可以工作。我还添加了另一种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');
}
}