Angular 2 ngClass：在尝试在 html 上显示 json 时获取预期表达式的插值 ()

Posted 2023-02-22

【中文标题】Angular 2 ngClass：在尝试在 html 上显示 json 时获取预期表达式的插值 ()

【英文标题】：Angular 2 ngClass: Get Got interpolation () where expression was expected when trying to display json on htmlAngular 2 ngClass：在尝试在 html 上显示 json 时获取预期表达式的插值 ()

【发布时间】：2017-02-16 17:55:40

【问题描述】：

我是 Angular 2 的新手，希望能从社区获得一些帮助。我目前正在尝试在我的 html 视图的 <tr> 元素中实现 ngClass 的动态/条件实现。使用的 trufy 是一个变量，其原始值来自我的 Componenet 上设置的 JSON 对象：

<td [ngClass] = "weak : jsonInMyComponenet.element, neutral : !jsonInMyComponenet.element"  ></td>

当我使用上面的代码时，我得到了这个错误：

在预期表达式的位置得到插值 ()

如果我删除大括号，我不会收到任何错误，但页面不会呈现元素，所以我看不到弱或中性的类实现。我做错了什么？

【参考方案1】：

不要同时使用[...] 和...。一个或另一个。

<td [ngClass] = "'weak' : jsonInMyComponenet.element, 'neutral' : !jsonInMyComponenet.element"  ></td>

... 用于字符串插值。 [...] 将值解释为表达式。

【讨论】：

谢谢 Gunter，是的，我删除了它，但是该类没有呈现。它将使单元格的背景颜色为红色或灰色，并且当前为白色。我不确定，如果我的 json 数据不正确： "jsonInMyComponenet": true, "jsonInMyComponenet1": false, "jsonInMyComponenet2" : true

我忘记了当属性名称是文字名称时，您需要将它们放在引号中。

好的，在这种情况下，应该评估为假的那些呢？我试过 '!jsonInMyComponenet.element' 和 !'!jsonInMyComponenet.element' 但没有渲染 :(

!jsonInMyComponenet.element 应该可以，如我的回答中的neutral 所示。