Angular项目HTML模板调用TypeScript函数报参数错误如何解决

错误原因 #

• 插值语法嵌套错误：Angular 的{{}}插值标记仅需包裹最外层的表达式即可，内部的变量、方法调用不需要再嵌套一层{{}}。你写法里的多层嵌套导致模板解析器无法正确识别参数，才会抛出语法错误和参数数量不匹配的提示。
• HTML 标签渲染问题：你的formatText方法返回的是包含<b>标签的字符串，直接用{{}}插值会被Angular默认转义，最终只会把<b>当成普通文本显示，不会生效为粗体样式。

修正方案 #

首先调整模板中的调用写法，不需要嵌套插值标记，直接在绑定中写表达式即可，同时用[innerHTML]属性绑定来渲染带HTML标签的内容：

<div class="mb-3" *ngFor="let sentence of category.sentences">
    <li [innerHTML]="formatText(sentence, findForm(sentence, forms))"></li>
</div>

另外你的代码还有两处可修正的细节：

1. findForm方法的参数里声明了forms数组，但方法内部循环用的是this.forms，没有用到传入的参数，可根据你的实际需求调整，要么直接用类属性this.forms不需要传参，要么循环改为遍历传入的forms参数。
2. formatText方法中拼接标签时写了两个<b>开标签，第二个应该为</b>闭合标签，否则最终渲染的HTML结构会出错。

内容的提问来源于stack exchange，提问作者7HROSHI