Angular 4如何应用动态样式？

Question

是否可以为Angular 4中的重复span元素应用动态top和left值？

Answer 1

您可以使用:

1. 该[style.anything]绑定,例如:<span [style.color]="red"></span>
2. [ngStyle]允许一次指定多个CSS属性的绑定,例如: <span [ngStyle]="{'color': 'red', 'font-weight': condition? 'bold':'300'}"></span>
3. [className]动态应用CSS类名的绑定,例如:<span [className]="condition? 'redText': 'blueText'"></span>

4. [ngClass]允许一次指定多个CSS 类的绑定,就像ngStyleCSS 属性一样,例如: <span [ngClass]="{'redText': condition1, 'blueText': condition2}"></span>

   [ngClass]接收一个对象作为其输入,并且仅当相应值的计算结果为true 时才应用该对象的每个键.

   例如,如果你在迭代数组items_array:

   <span *ngFor="let i of items_array" [ngClass]="{'redText': i.shouldBeRed, 'blueText': i.shouldBeBlue}"> The span text </span>

   每个元素(i)的CSS类将是:

   • redText如果属性i.shouldBeRed的计算结果为真(即:它是true,1,非空字符串,或一个非空的对象;
   • blueText 如果属性i.shouldBeBlue计算结果为true;
   • redText blueText 如果两个属性都评估为true.

在你的情况下,我想这[ngStyle]是合适的:

<span *ngFor="let i of items_array" [ngStyle]="{'top': expression1, 'left': expression2}"> The span content </span>