带有（单击）事件的角度插值函数名称

Question

I got a JSON file where I specify dynamic different button but clicking on button does not call the function.

Here is my JSON file structure:

export const liveButtonData = [
    { title: 'My Name', function: 'getName()'}
    { title: 'My Title', function: 'getTitle()'}
    { title: 'My Status', function: ''}
}];

In my Angular HTML code

// the following clicking on the button does nothing

<button title={{button.title}}
        (click)=button.function> 
</button>

or

<button title={{button.title}}
        (click)="button.function"> 
</button>

// this is not allowed

// the following throws an error
<button title={{button.title}}
        (click)={{button.function}}> 
</button>

Not sure what other syntax to try. Any help is appreciated and thanks in advance.

Answer 1

In your case the JSON file holds the function names as:

• string names (not directly refer to the real method objects)
• with () at the end. If we would like to invoke a method via string name should remove the () from the string name

Possible solution:

export const liveButtonData = [
    { title: 'My Name', function: 'getName'}
    { title: 'My Title', function: 'getTitle'}
    { title: 'My Status', function: ''}
}];

<button title={{button.title}}
        (click)="functionWrapper(button, button.function)"> 
</button>

function functionWrapper (functionSource, functionName) {
    functionSource[functionName]();
}

Then when we have the name/key of the function. We take it from it's source object with []. And call it with () at the end. And in the case above the () are not a string but real JavaScript invoke.