在Angular 4中,是否可以为ngFor重复的span元素应用动态的top和left值?
您可以使用:
[style.anything]
绑定,可以做一些简单的事情,例如:<span [style.color]="red"></span>
,或者更复杂的事情,例如将一个变量(这里是progress
)绑定到一个百分比(width
):[style.width.%]="progress"
;[ngStyle]
绑定,可以同时指定多个CSS属性,例如:<span [ngStyle]="{'color': 'red', 'font-weight': condition? 'bold':'300'}"></span>
[className]
绑定,可以动态应用CSS类名,例如:<span [className]="condition? 'redText': 'blueText'"></span>
[ngClass]
绑定,可以同时指定多个CSS类,就像ngStyle
对于CSS属性一样,例如:<span [ngClass]="{'redText': condition1, 'blueText': condition2}"></span>
[ngClass]
接收一个对象作为输入,并且仅在该对象的每个键对应的值为真时应用。
例如,如果你正在迭代数组items_array
:
<span *ngFor="let i of items_array"
[ngClass]="{'redText': i.shouldBeRed, 'blueText': i.shouldBeBlue}">
The span text
</span>
i
)的CSS类将是:
i.shouldBeRed
的值为true(即:它是true
,1
,非空字符串或非null对象),则为redText
;i.shouldBeBlue
的值为true,则为blueText
;redText blueText
。[ngStyle]
可能是合适的。<span *ngFor="let i of items_array"
[ngStyle]="{'top': expression1, 'left': expression2}">
The span content
</span>
<span [style.top]="topvalue"></span>
其中topvalue
是一个变量。 - suhailvs