我有 4 行，每行包含 3 張卡片。我正在從 db 獲取這些卡的資訊，然后使用 ngfor 在 html 中呈現它們。問題是我希望每行卡片顯示不同的顏色。
示例：->
第 1 行：藍卡 | 白卡 | 紅牌
第 2 行：藍卡 | 白卡 | 紅牌
到目前為止，我可以制作兩種顏色，但我如何才能制作 3 種顏色，如我在示例中所述。
<div *ngFor="let r of rates; let i=index;">
<div class="box" [ngClass]="i % 2 == 0 ? 'BLUECARD' : 'REDCARD'">
<!-- card contents -->
</div>
</div>
如您所見，我可以交替顯示 2 種顏色，但我怎樣才能顯示 3 種顏色呢？
uj5u.com熱心網友回復：
我會用你的顏色創建一個字串陣列，然后[ngClass]=colorArray[i]或類似的東西。
uj5u.com熱心網友回復：
您可以嘗試這些（同時我僅使用愚蠢的邏輯）：-
[ngClass]="{1 : 'BLUECARD', 2 : 'REDCARD', 3 : 'WHITECARD'}[i % 2]"
或者
[ngClass]="{'BLUECARD': i % 2 === 0, 'REDCARD' : i % 2 !== 0, 'WHITECARD': i % 2 === undefined }"
uj5u.com熱心網友回復：
我必須做這樣的事情我創建了一個函式，它根據你作為引數提供的顏色回傳顏色；在您的情況下，您可以創建一個以 i 作為引數并回傳顏色的函式
<div class="box" [ngStyle]="{'background-color':giveCouleur(i)}">
<!-- card contents -->
</div>
在你的 ts 檔案中
giveCouleur(i:any){
var color="default_color";//or null if you want
if(i%2==0){
color="Your_colr";
//ex:color="#ffffff"
}else if(i%3==0){
color="your_color";
}else{
color="your_color"
}
//In this case, you can create as many conditions as you want.
return color;
}
你可以試試 ngClass
<div class="box" [ngClass]="{giveCouleur(i)}">
<!-- card contents -->
</div>
giveCouleur(i:any){
var color="default_color";//or null if you want
if(i%2==0){
color="BLUECARD";
}else if(i%3==0){
color="REDCARD";
}else{
color="WHITECARD"
}
//In this case, you can create as many conditions as you want.
return color;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/481411.html
標籤：javascript 有角度的 恩福
上一篇：基礎資料更改時防止更改下拉選項