如何在两个CSS样式的arrayList中显示元素？

Question

我正在编写一个代码，其中有一个arrayList，其中有两个名称ieBob和Steve，我想显示它们，如果显示Bob，它应该是绿色的，如果显示Steve，它应该是REd的颜色。

Component.CSS

.Bob{
  font-weight:bold;
  color:green;
}
.Steve{
color:red;
}

Component.HTML

<div class="container">
<div class="row" *ngFor="let st of Names;"> 
  <div class="col-2">
    <p class="Bob">{{st}}</p>
    </div>
      <div class="col-2">
    <p class="Steve">{{st}}</p>
   </div>
</div>
</div>

在Component.Ts中

Names:string[]=['Bob','Bob','Steve','Bob','Steve']; in Component.Ts

Answer 1

您可以根据条件提供课程。

修改您的代码如下：

<div class="container">
<div class="row" *ngFor="let st of Names;"> 
  <div class="col-2">
    <p  [ngClass]="(st=='Bob')?'Bob':'Steve'">{{st}}</p>
    </div>
</div>
</div>

这是工作示例：

Working Stackblitz Example

Answer 2

当我们有大量的元素并且我们可以用不同的背景展示它们时我们可以采用几种方法。

1.-具有一系列样式/背景并使用索引

colors=['red','yellow','green'...]
<div *ngFor="let item of items;let index=i>
 <div [style.background-color]="colors[i]">item.data</div>
</div>

2.-背景是“物品”的“财产”

items=[{data:...,color:'Red'},{data:...,color:'yellow'},...]
<div *ngFor="let item of items;let index=i>
 <div [style.background-color]="item.background">item.data</div>
</div>

我们可以用

[style.css_property]="value"
//or 
[className]="class"
//or 
[ngClass]="{'class':condition}"

在你的情况下，阿曼，我认为你的“物品”有一个属性“类”，例如，

{data:...,class:'bold-true green-true'}

因此，当您想要添加项目时，您可以创建一个功能

getClass()
{
   let class="";
   if (this isBold)
      class="isBlod-true";
   if (this.isCut)
      class=class+" isCut-true";
   if (this.isGreen)
      class=class+" isGreen-true";
   ...
 return class
}

当你添加一个项目时，你可以做到

items.push({data:...,class:this.getClass()})

然后是代码

<div *ngFor="let item of items;let index=i>
 <div [className]="item.class">item.data</div>
</div>

诀窍