javascript - 更改特定单词的颜色

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