Le navigateur n'analyse pas les balises html renvoyées par un tuyau angulaire

Question

Ce que je veux arriver, c'est donner une valeur à un tuyau, et laisser le tuyau le transformer en une liste. Ce n'est peut-être pas la meilleure façon de s'y prendre, mais c'est la première chose qui me vient à l'esprit.

Fondamentalement, j'ai une table simple. Et j'ai mon modèle en tant que tel

<tr *ngFor="let res of results"> 
    <td>{{res.value1}}</td> 
    <td>{{res.value2 | list}}</td> 
</tr> 

Ma pipe list est en tant que telle.

import {Pipe, PipeTransform} à partir de '@ angular/core';

@Pipe({ 
    name: 'list' 
}) 
export class ListPipe implements PipeTransform { 
    transform(value: string, args?: any): any { 
     let newList: string[]; 
     newList = value.split(','); 
     let output = '<ul>'; 
     newList.forEach(val => { 
      output += `<li>${val}</li>`; 
     }); 
     output += '</ul>'; 
     return output; 
    } 
} 

Mon résultat attendu serait quelque chose comme

<tr> 
    <td>value 1</td> 
    <td> 
     <ul><li>value2.a</li><li>value2.b</li></ul> 
    </td> 
</tr> 

Mais ce qui se passe est la valeur littérale <ul><li>value2.a</li><li>value2.b</li></ul> sont rendus dans ma page.

Qu'est-ce que je fais mal?

Answer 1

Je soupçonne que vous devez utiliser la propriété innerHTML pour l'afficher:

<td [innerHTML]="res.value2 | list"></td> 

Et changer votre pipe comme:

let output = '<ul>'; 
newList.forEach(val => { 
    output += `<li>${val}</li>`; 
}); 
output += '</ul>'; 

Stackblitz Example

L'interpolation <td>{{res.value2 | list}}</td> ne fonctionne pas parce que angulaire crée un nœud de texte et met à jour son nodeValue propriété donc il sera affiché sous forme de chaîne.

Answer 2

Pourquoi n'utilisez-vous pas seulement *ngFor? Vous l'utilisez déjà sur le tr