Page "IONIC 3" ajoutant une variable de contenu html

Question

J'essaie d'ajouter une variable contenant du html à ma page ionique 3.

Page ionique :

<ion-header>

  <ion-navbar>
    <ion-title>{{offeritem.data.nameprovider}}</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <div>
    {{offeritem.data.detailsoffer}}
  </div>
</ion-content>

---

Cependant, je reçois le message suivant

Résultat :

<p>The table contains 30 pieces:</p><ul><li>5 Philadelphia Roll</li>
<li>5 Fantasia Roll</li>

Veuillez me dire ce que je fais de mal dans ce cas.

Merci d'avance

Answer 1

Vous devez utiliser [innerHTML] pour un ionique 3 comme celui-ci :

<p [innerHTML]="yourVarHere"></p>

Answer 2

<span [innerHTML]="offeritem.data.detailsoffer"></span>

REF

Notez la section sur "Liaison ou interpolation de propriété ?"

Answer 3

import {DomSanitizationService} from '@angular/platform-browser';

class....{
  public getSafehtml(html:string){
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

<ion-content padding>
  <div [innerHTML]="getSafehtml(offeritem.data.detailsoffer)"></div>
</ion-content>

Si vous n'utilisez pas bypassSecurityTrustHtml, votre style ne fonctionnera pas.