Question

我正在写一个代码，其中有一个arrayList中有两个名称，即Bob和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。-具有样式/ bakcground数组，并使用索引

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>

捣蛋

如何在具有两种CSS样式的arrayList内显示元素？

2 个答案: