如何使用 Angular 函数显示 HTML？

Question

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

\n\n

import {Component, OnInit} from \'@angular/core\';\nimport {TP, Question, Qtype} from "../tp";\nimport * as Exercice from \'../assets/Exercice.json\';\n\n@Component({\n  selector: \'app-tp\',\n  templateUrl: \'./tp.component.html\',\n  styleUrls: [\'./tp.component.css\']\n})\nexport class TpComponent implements OnInit {\n\n\n  constructor() {\n  }\n\n  ngOnInit(): void {\n  }\n\n  displayQCM(question: Question) {\n    return `\n      <div>\n            <hr class="w-100">\n            <h3>Question n\xc2\xb0${question.number} ${question.questionType}</h3>\n            <p>${question.questionContent}</p>\n            ...\n            QCM question element\n            ...\n        </div>\n    `;\n  }\n\n  displayTrueOrFalse(question: Question) {\n    return `\n      <div>\n            <hr class="w-100">\n            <h3>Question n\xc2\xb0${question.number} ${question.questionType}</h3>\n            <p>${question.questionContent}</p>\n            ...\n            true or false question element\n            ...\n        </div>\n    `;\n  }\n\n  displayQuestion(question: Question) {\n    return `\n      <div>\n            <hr class="w-100">\n            <h3>Question n\xc2\xb0${question.number} ${question.questionType}</p>\n            <p>${question.questionContent}</p>\n            ...\n            normal question element\n            ...\n        </div>\n    `;\n  }\n}\n

\n\n

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

\n\n

但 HTML 仅显示为纯文本，在页面上完整编写代码，您知道如何解决此问题吗？

\n\n

编辑：编辑代码以使其更适合上下文，问题来自一个 json 文件，有 3 种类型，我创建了一个函数来将它们转换为Question并根据类型我想要 3 种方式在 3 中显示它们不同的形式，每种类型都是一个长的HTML开发，并用不同的标签和元素显示

\n

Answer 1

您需要在 html 文件中使用 [innerHTML] 属性

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