Angular 2 将类和样式添加到 JSON 中的现有类和样式答案

【问题标题】：Angular 2 add class and style to existing one from a JSONAngular 2 将类和样式添加到 JSON 中的现有类和样式
【发布时间】：2017-05-16 20:02:15
【问题描述】：

在我们的组件中，我们通过 http 检索包含元素各种样式的 JSON：

{
  id: 1,
  style: "color: red; background-color: white;",
  class: "fa-times",
},
{
  id: 2,
  style: "",
  class: "fa-check active",
}

我无法真正更改 JSON 检索，因为它来自外部来源。

然后我想在 ngFor 循环中应用该样式：

<li *ngFor="let element of elements">
  <i class="fa" style=""></i> {{element .id}}
</li>

但现在我想将 JSON 中定义为字符串的类和样式添加到我的元素中。

类

我尝试了类似 [class] = "fa {{element.class}}" 但它触发了错误：

未捕获（承诺中）：错误：模板解析错误：解析器错误：得到插值 ({{}}) 其中表达式应位于 [fa 中的第 3 列 {{element.class}}]

我设法让我的请求的类部分工作，方法是在某些网站上使用 ngClass 并在此处给出答案：

class="fa" [ngClass]="possibility.class"

它有效。但我仍然很难应用请求的样式。

样式

我尝试了几种方法：

[style]="possibility.style"

然后触发Angular2的xss保护：

警告：清理不安全的样式值颜色：绿色（请参阅 http://g.co/ng/security#xss)。

警告：清理不安全的样式值颜色：绿色（请参阅 http://g.co/ng/security#xss)。

警告：清理不安全的样式值颜色：红色（请参阅 http://g.co/ng/security#xss)。

警告：清理不安全的样式值颜色：红色（请参阅 http://g.co/ng/security#xss)。

我也试过style="{{possibility.style}}"，当然它会触发相同的 XSS 保护。

我尝试了 ngStyle 方法：

[ngStyle]="possibility.style"

但它似乎无法解析从 JSON 解析的样式（例如：字符串 color: green; background-color: white;。即使是像 color: green; 这样的单一样式也会破坏脚本）：

./ProjectComponent 类 ProjectComponent 中的错误 - 内联模板：15:14 原因：找不到不同的支持对象 '颜色：绿色'

原始异常：找不到不同的支持对象“颜色：绿色'

【问题讨论】：

我有很多方法可以做到这一点，但 SO 不是一个“为我做”的网站。到目前为止，您尝试了哪些方法？你用了什么工具？您是否阅读过这些工具的文档？事情在哪些方面没有按预期工作？您是否有特定代码的 sn-ps 不起作用？
嗨彼得，我更新了页面以列出我的所有尝试

标签： angular

【解决方案1】：

你可以使用ngClass:

<li *ngFor="let element of elements">
  <i class="fa" [ngClass]="element.class"></i> {{element.id}}
</li>

【讨论】：

【解决方案2】：

将类属性绑定到组件的属性：

<i [class]="myProperyInMyComponent"></i> {{element .id}}

在您的组件中：

myPropertyInMyComponent: string

一旦你从你的 http: 中取回结果

this.myPropertyInMyComponent = ....

见template syntax

【讨论】：