working example

Question

我有一个json，它会返回我的边框颜色，这将应用于跨度。 JSON是档案= [ { ＆＃39; BORDERCOLOR＆＃39;：＆＃39;红色＆＃39; } ]

如何动态应用类？

我的HTML很简单

<div *ngFor="let file of File">
 <span dynamicClassComesHere></span>

Answer 1

试试这个，

HTML：

<div *ngFor="let file of File">
 <span [style.border-color]="file.borderColor"></span>
</div>

Answer 2

应该是 -

 <span [ngClass]='dynamicClass'></span>

working example

除此之外，根据官方文档
，有多种方法可以实现

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Read more about ngClass here

Answer 3

因为它的单一样式使用ngStyle就像这样

const style = {'borderColor':'red'};//ts file 
<span [ngStyle]="style"></span >
<span [ngStyle]="{'borderColor':getBorderColor()}"></span >

在你的情况下

<div *ngFor="let file of File">
 <span [ngStyle]="JSON.stringify(file)"></span>

或者可以像这样

    <span [style.borderColor]="getBorderColor()">
    getBorderColor() {
     style =  JSON.parse(`{ 'borderColor':'red' }`);
     return style.borderColor;
   }

在你的情况下

<div *ngFor="let file of File">
 <span [style.borderColor]="file.borderColor"></span>

Angular：添加动态类

3 个答案:

working example