更改特定单词的颜色

Question

我有一个我从json获得的文本，我想改变文本中显示的某些单词的颜色，例如recusada。我创建了一个管道来尝试这样做：

 transform(valor:any):any{
    console.log("texto", valor);
    return valor.replace(/recusada/, '<span style="color: red">$&</span>');
 }

这是html：

   <p *ngFor="let historico of disputa.historico"> {{historico.texto | filtroHistorico: historico.texto}} </p>

唯一的问题是，不是只将recusada的颜色更改为红色，而是文字如下：

  

Proposta no valor de R $：5762 <span style="color: red">recusada</span>

Answer 1

您必须使用innerHTML才能呈现 html 。

所以你的代码应该是这样的

<p *ngFor="let historico of disputa.historico" [innerHTML]="historico.texto | filtroHistorico: historico.texto"> </p>

plunkr