Ändern Sie die Farbe eines bestimmten Wortes

Question

Ich habe einen Text, den ich von einem Json bekomme und ich möchte die Farbe einiger Wörter ändern, die auf dem Text wie recusada zum Beispiel erscheint. Ich habe ein Rohr, um zu versuchen, es zu tun:

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

Das einzige Problem besteht darin, dass statt nur die Farbe des recusada auf rot der Text wie folgt aussieht:

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

Dies ist die html ist:

Proposta keine Tapferkeit de R $: 5762 <span style="color: red">recusada</span>

Answer 1

Sie müssen innerHTML verwenden, um html zu rendern.

So sollten Sie Ihren Code so aussehen

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

plunkr