如何使用agular中的ngclass在行的每一列上显示不同的颜色？

发布于 2025-02-01 14:43:11 字数 463 浏览 4 评论 0原文

我有4行，每行包含3张卡。我正在从DB获取这些卡的信息，然后在HTML中使用NGFOR渲染它们。问题是我希望一排的每条卡都显示出不同的颜色。

示例： - ＆gt;

第1行：蓝卡| Whitecard | Redcard

Row 2：蓝卡| Whitecard |雷德卡（Redcard）

到目前为止，我能够使用两种颜色做，但是我该如何制作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种颜色？

原文

I have 4 rows, each row contains 3 cards.
I am fetching information for these cards from db then rendering them using ngfor in html.
The problem is I want each of card of a row to show different color.

Example:->

ROW 1:
BLUECARD | WHITECARD | REDCARD

ROW 2:
BLUECARD | WHITECARD | REDCARD

as of now I able to do for two colors but how can I make it for 3 colors as I stated in example.

<div *ngFor="let r of rates; let i=index;"> 
  <div class="box" [ngClass]="i % 2 == 0 ? 'BLUECARD' : 'REDCARD'">
   <!-- card contents -->
  </div>
</div>

As you can see I am able to show 2 colors alternatively but how can I show 3 colors instead?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦言归人 2025-02-08 14:43:11

我将使用您的颜色创建一个字符串数组，然后[ngclass] = colorArray [i]或类似的内容。

回复收藏 0 原文

知足的幸福 2025-02-08 14:43:11

您可以尝试这些（同时我只使用愚蠢的逻辑）： -

[ngClass]="{1 : 'BLUECARD', 2 : 'REDCARD', 3 : 'WHITECARD'}[i % 2]"

或

[ngClass]="{'BLUECARD': i % 2 === 0, 'REDCARD' : i % 2 !== 0, 'WHITECARD': i % 2 === undefined }"

you can try these (meanwhile i am using silly logic for example only) :-

[ngClass]="{1 : 'BLUECARD', 2 : 'REDCARD', 3 : 'WHITECARD'}[i % 2]"

[ngClass]="{'BLUECARD': i % 2 === 0, 'REDCARD' : i % 2 !== 0, 'WHITECARD': i % 2 === undefined }"

回复收藏 0 原文

嘦怹 2025-02-08 14:43:11

我不得不做这样的事情
我创建了一个函数，该函数根据您作为参数提供的颜色返回颜色；
颜色，

<div class="box" [ngStyle]="{'background-color':giveCouleur(i)}">
   <!-- card contents -->
</div>

在您的情况下，您可以创建一个函数，该函数将i作为参数并返回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;
  }

I had to do something like this
I created a function that returns a color based on what you give it as a parameter;
In your case, you can create a function that takes i as parameter and returns a color

<div class="box" [ngStyle]="{'background-color':giveCouleur(i)}">
   <!-- card contents -->
</div>

In your ts file

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;
  }

you can try with 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;
  }

回复收藏 0 原文

~没有更多了~