1
votes

comment afficher du HTML avec la fonction angulaire?

Je voudrais afficher du HTML formaté à l'aide de la fonction de script de type dans un composant angulaire, je voulais qu'il affiche une question de type différent, j'ai essayé ceci,

<div class="row justify-content-center">
  <div class="col-12 col-lg-6">
    <h2>Questions</h2>
    {{displayQCM()}}
    {{displayQuestion()}}
    {{displayTrueOrFalse()}}
  </div>
</div>

import {Component, OnInit} from '@angular/core';
import {TP, Question, Qtype} from "../tp";
import * as Exercice from '../assets/Exercice.json';

@Component({
  selector: 'app-tp',
  templateUrl: './tp.component.html',
  styleUrls: ['./tp.component.css']
})
export class TpComponent implements OnInit {


  constructor() {
  }

  ngOnInit(): void {
  }

  displayQCM(question: Question) {
    return `
      <div>
            <hr class="w-100">
            <h3>Question nÂ°${question.number} ${question.questionType}</h3>
            <p>${question.questionContent}</p>
            ...
            QCM question element
            ...
        </div>
    `;
  }

  displayTrueOrFalse(question: Question) {
    return `
      <div>
            <hr class="w-100">
            <h3>Question nÂ°${question.number} ${question.questionType}</h3>
            <p>${question.questionContent}</p>
            ...
            true or false question element
            ...
        </div>
    `;
  }

  displayQuestion(question: Question) {
    return `
      <div>
            <hr class="w-100">
            <h3>Question nÂ°${question.number} ${question.questionType}</p>
            <p>${question.questionContent}</p>
            ...
            normal question element
            ...
        </div>
    `;
  }
}

mais le HTML ne s'affiche que sous forme de texte brut en écrivant entièrement le code sur la page, savez-vous comment résoudre ce problème?

EDIT: le code édité pour être plus dans le contexte, la question vient d'un json et il y en a 3 types, j'ai créé une fonction pour les traduire en Question et en fonction de leur type, je veux 3 façons de les afficher sous 3 formes différentes, chaque type étant un long développement HTML et sont affichés avec une balise et un élément différents

typescript angular html angular-cli

3 commentaires

Quel est l'intérêt de faire cela ici? pour injecter du html, vous devez utiliser [innerHtml]

Vous pouvez découvrir plusieurs solutions: ng-template est un élément Angular utilisé pour rendre les templates HTML, La classe Renderer2 qui permet de manipuler / créer des éléments DOM

existe-t-il une meilleure façon de générer du HTML à partir d'une liste d'objets?

4 Réponses :

0
votes

Si vous essayez simplement d'injecter du contenu dynamique, vous devez nettoyer votre chaîne html, puis utiliser innerHtml. D'après votre question, je ne sais pas quel est l'objectif et il doit y avoir une meilleure façon de ne pas injecter du HTML, mais vous auriez besoin de clarifier l'objectif.

questions: Array<SafeHtml> = new Array<SafeHtml>();
myJson: Array<string> = []; //I dont know where its coming from

  constructor(private sanitizer: DomSanitizer) {
  }

  ngOnInit(): void {
      myJson.forEach((question) => { 
          this.questions.push(this.sanitizer.sanitize(question)); 
      })
  }

  <div class="row justify-content-center">
    <div class="col-12 col-lg-6">
      <h2>Questions</h2>
      <div *ngFor="let q of questions" [innerHtml]="q"></div>
    </div>
  </div>

4 commentaires

comment faire si je ne connais pas le nombre de questions qu'il y aura?

Eh bien, vous pouvez créer un tableau de code HTML purifié. Mais d'où viennent les questions?

à partir d'un fichier json

@lolozemadnessgamer édité, je pense que quelque chose de ce genre fonctionnerait, mais c'est s'il n'y a pas d'autre moyen de coder en dur la question dans votre modèle et de les afficher / masquer dynamiquement. L'autre chose est que j'ai compris que le json est un Array qui pourrait être faux dans votre cas.

0
votes

Exemple TS:

<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div *ngIf="displayQCM">...</div>
<div *ngIf="displayQuestion">...</div>
<div *ngIf="displayTrueOrFalse">...</div>
</div>
</div>

HTML

displayQCM : boolean;
displayQuestion : boolean;
displayTrueOrFalse : boolean;

0 commentaires

1
votes

Pourquoi n'utilisez-vous pas ngFor pour lister toutes les questions?

HTML

<ng-template [ngIf]="question.questionType === 'normal'">Your HTML code for normal question</ng-template>
<ng-template [ngIf]="question.questionType === 'trueFalse'">Your HTML code for trueFalse question</ng-template>

Et allQuestions est votre tableau de questions

Vous pouvez ajouter les conditions dépendent du type de question avec * ngIf:

 <p *ngIf="question.questionType=== 'normal'"></p>

ou vous pouvez utiliser ng-template:

<div class="row justify-content-center">
      <div class="col-12 col-lg-6">
        <h2>Questions</h2>
             <div *ngFor="let question of allQuestions">
                <hr class="w-100">
                <h3>Question nÂ°{{question.number}} {{question.questionType}}</h3>
                <p>{{question.questionContent}}</p>
            </div>
      </div>
    </div>

0 commentaires

1
votes

Vous devez utiliser la propriété [innerHTML] dans votre fichier html

<div class="row justify-content-center">
  <div class="col-12 col-lg-6">
    <h2>Questions</h2>
   <div [innerHTML]="displayQCM()"></div> 
    <div [innerHTML]="displayQuestion()"></div>
    <div [innerHTML]="displayTrueOrFalse()"></div>
  </div>
</div>

0 commentaires