как отобразить HTML с функцией angular? - PullRequest
Новая
       50

как отобразить HTML с функцией angular?

0 голосов
/ 18 июня 2020

Я хотел бы отображать форматированный HTML с использованием функции сценария типа в компоненте angular, я хотел, чтобы он отображал вопрос другого типа, я пробовал это, 

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>
    `;
  }
}

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

но HTML отображается только как обычный текст, полностью записывая код на странице, знаете ли вы, как это исправить?

EDIT: отредактированный код, чтобы быть более в контексте, вопрос исходит от json файл и их 3 типа, я создал функцию для их перевода в Question, и в зависимости от типа я хочу 3 способа отображения их в 3 разных формах, каждый тип как длинная разработка HTML и отображается с другой тег и элемент

Ответы [ 4 ]

1 голос
/ 18 июня 2020

Вам необходимо использовать свойство [innerHTML] в вашем 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>

Output

1 голос
/ 18 июня 2020

Почему вы не используете ngFor для перечисления всех вопросов?

HTML

<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>

И allQuestions - это ваш массив вопросов

Вы можете добавлять условия в зависимости от для типа вопроса с * ngIf: 

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

или вы можете использовать ng-template: 

<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>
0 голосов
/ 18 июня 2020

Пример TS: 

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

HTML

<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>
0 голосов
/ 18 июня 2020

Если вы просто пытаетесь ввести содержимое динамического c, вам необходимо очистить строку html, а затем использовать внутренний Html. Из вашего вопроса я не уверен, какова цель, и должен быть лучший способ без введения Html, но вам нужно будет уточнить цель. 

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>
...