angular - 有没有可能根据以下情况在 *ngFor 上应用动态 css？

Question

使用*ngFor. 我的代码是这样的。

<div *ngFor="let data of datas">
  <td>{{data.name}}</td>
  <td>{{data.content}} </td>
</div>

假设 data.content 是“你好，你好吗”。是否有任何可能的方法可以在 Hello 上动态应用 css 以仅显示绿色的Hello和黑色的其他颜色。

标签： angularangular7

Answer 1

您可以将 slice 用于不同 css 中所需的字母：

<div *ngFor="let data of datas">
<td>{{data.name}}</td><br/>
 <td style="color:green">{{data.content | slice:0:6}}</td> 
<td>{{data.content | slice:7:24}} </td>
</div>

工作示例