0
votes

Comment mettre des données en HTML en tant que balise dom

Je crée une paire clé-valeur JSON qui contient des sélecteurs de composants qui veulent être injectés dans du code HTML.

<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector | keyvalue" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="contetnt">{{item.value}}</div>
  </div>
</div>

En HTML

testSelector = {
    keyOne: '<selector1></selector1>', keyTwo: '<selector2></selector2>', keyThree: '<selector3></selector3>'
};

Lorsque la vue est créée, les sélecteurs sont rendus sous forme de chaîne. Est-il possible de rendre comme balise dom?

angular

0 commentaires

3 Réponses :

2
votes

Vous pouvez rendre du HTML avec une liaison de données:

<div class="title" [innerHTML]="item.key"></div>

Démo en direct

2 commentaires

[innerHTML] = "item.key" est rendu correct mais [innerHTML] = "item.value" ne fonctionne pas

J'ai ajouté un lien de démonstration, vérifiez ma réponse

0
votes

oui, vous pouvez le rendre en html en utilisant [innerHtml] pour les rendre.

change your html to :
<div class="contetnt" [innerHtml]="item.value"></div>

0 commentaires

1
votes

Comme les réponses précédentes l'ont souligné, innerHtml devrait vous permettre d'obtenir le comportement souhaité, mais si vous essayez de rendre du HTML 'complexe', vous devez considérer que votre contenu peut être 'sanitized' .

Voici une implémentation d'un tube de nettoyage que j'utilise habituellement dans mes projets:

<div class="content" [innerHtml]="item.value | safeHtml"></div>

0 commentaires