Question

我想基于数组索引值> 4来设置html元素的样式

<div *ngFor="let e of arr ; let i = index" > 
(i > 4 ) ? <p [ngClass]="['clr']" [ngStyle]="{'background-color': 'blue'}"> {{e}} </p>  :  <p> {{e}} </p> 
</div>

我想检查循环中的条件。但是它只是打印成字符串，没有检查条件。

Answer 1

一种解决方法是使用*ngIf

<div *ngFor="let e of arr ; let i = index">
    <p *ngIf="i > 4" [ngClass]="['clr']" [ngStyle]="{'background-color': 'blue'}"> {{e}} </p>
    <p *ngIf="i <= 4"> {{e}} </p> 
</div>

另一种方法是使用ngClass

使用条件类

<div *ngFor="let e of arr ; let i = index">
    <p [ngClass]="{'clr-blue' : i > 4}"> {{e}} </p>
</div>

Answer 2

最不冗长的方法可能是简单地将条件放在ngClass或ngStyle语句中。

[ngClass]=" i > 4 ? 'whateverClass' : 'whateverOtherClass'"

或

[ngStyle]="{'background-color' : ((i > 4) ? 'blue' : 'red') }"

或这些的任何变化

基于数组索引值样式的HTML元素

2 个答案: