javascript - 通过对象动态函数分配和调用，Angular 6？

Question

我为动态生成的按钮分配了一个点击处理程序。我在点击处理程序函数中调用回调。不幸的是，我收到一条错误消息，指出

"Callback function is not a function".

我在下面提供基本代码。

HTML(组件 2)-

<button *ngFor="let btn of content.buttons" type="button"
        (click)="btn.func()" class="{{btn.type}}">
    <span class="btn-text">{{btn.text}}</span>
</button>

TS(组件 2)-

@Component({
  selector: 'app-popup',
})

@Input() content;

我传递数据的组件代码 -

HTML(组件 1)-

<app-popup [content]="popupContent"></app-popup>

TS(组件 1)-

this.popupContent = {
  "buttons":[{
        "text":"OK",
        "type":"btn-red",
        "func": this.someHandler
  }]
};

someCallbackFunction(){
  console.log('I am a callback function');
}

someHandler(){
  this.someCallbackFunction();
}

当我点击按钮触发事件时，它会抛出这个错误-

ERROR TypeError: this.someCallbackFunction is not a function

我也试过像这样设置处理程序

(click)="btn[func]()" 

但不幸的是它对我不起作用。

请提出解决方案。谢谢:)

Answer 1

尝试通过粗箭头函数调用该函数，这样它应该具有正确的 this 上下文。只需改变您定义它的方式即可。

"buttons":[{
     "text":"OK",
     "type":"btn-red",
     "func": () => { this.someHandler(); }
}];

Read关于为什么上下文丢失和函数找不到的原因。