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

Question

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

组件.CSS

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

组件.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

您可以根据条件提供类(class)。

修改你的代码如下:

<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