Question

在我们的组件中，我们通过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] =＆＃34; fa {{element.class}}＆＃34;但它会触发错误：

未捕获（承诺）：错误：模板解析错误：解析器错误：得到插值（{{}}）其中表达式位于[fa {{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解析的（例如：string color: green; background-color: white;。即使像color: green;这样的单一样式也会破坏脚本）：

./ProjectComponent类ProjectComponent中的错误 - 内联   模板：15：14引起：找不到不同的支持对象   ＆＃39;颜色：绿色＆＃39;

原始例外：找不到不同的支持对象＆＃39;颜色：   绿色＆＃39;

Answer 1

您可以使用ngClass：

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

Answer 2

让class属性绑定到组件的属性：

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

组件中的

：

myPropertyInMyComponent: string

从http：

返回结果后

this.myPropertyInMyComponent = ....

请参阅template syntax

Angular 2从JSON中为现有的类添加类和样式

类

样式

2 个答案: