通过Object动态分配和调用函数，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关于上下文丢失和找不到函数的原因。

Answer 2

Modify "func": this.someHandler to "func" :() => this.someHandler()

这样试试：

Working Demo

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

Answer 3

请为此使用@Output

弹出component.ts（子组件）； Html

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

Ts（子组件）

import { Output, EventEmitter } from '@angular/core';

@Output() onBtnClicked = new EventEmitter<any>();

btnClicked(){
 this.onBtnClicked.emit(1);
}

在父组件 Html（父组件）

<app-popup [content]="popupContent" (onBtnClicked)="onBtnClicked($event)"></app-popup>

Ts（父组件）

onBtnClicked(event){

}

通过Object动态分配和调用函数，Angular 6？

Dynamic function assigning and calling through Object, Angular 6?

html

javascript

this

angular