1. 首页
  2. 问题列表
  3. 如何用角函数显示HTML？
提问者：小点点

如何用角函数显示HTML？


我想在一个角度的组件中使用类型脚本函数显示格式化的HTML，我想它显示不同类型的问题，我尝试了这个，

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只显示为纯文本，在页面上写完全的代码，你知道如何解决这个问题吗？

编辑:编辑的代码更符合上下文，问题来自json文件，有3种类型，我创建了一个函数将它们翻译成question，根据类型我想用3种方式以3种不同的形式显示它们，每种类型作为一个长HTML开发，并用不同的标记和元素显示


共3个答案

匿名用户

为什么不用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>

所有问题都是你的问题阵列

您可以根据问题类型添加条件，使用*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>

匿名用户

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

匿名用户

如果您只是尝试注入动态内容，则需要清理html字符串，然后使用innerHTML。 从你的问题，我不确定目标是什么，必须有一个更好的方法，而不是注入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>

相关问题