更改特定單詞的顏色

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無勇氣去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