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

Question

我得到了一个 JSON 文件，我在其中指定了动态不同的按钮，但单击按钮不会调用该函数。

这是我的 JSON 文件结构：

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

在我的 Angular HTML 代码中

// 下面点击按钮什么都不做

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

要么

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

// 这是不允许的

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

不确定要尝试什么其他语法。 感谢您提供任何帮助，并提前致谢。

Answer 1

在您的情况下，JSON 文件将函数名称保存为：

• 字符串名称（不直接引用真正的方法对象）
• 以 () 结尾。 如果我们想通过字符串名称调用一个方法，应该从字符串名称中删除 ()

可能的解决方案：

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]();
}

然后当我们有了函数的名称/键时。 我们使用 [] 从它的源对象中获取它。 最后用 () 调用它。 在上面的例子中， () 不是字符串而是真正的 JavaScript 调用。