在 ionic App 上显示来自 JSON 对象的 html 元素答案

【问题标题】：Display html element from JSON object on ionic App在 ionic App 上显示来自 JSON 对象的 html 元素
【发布时间】：2017-11-17 09:19:11
【问题描述】：

我一直在尝试从 JSON 对象嵌入 html 元素，而它目前正在将 html 显示为原始代码。

有人可以帮帮我吗？

detail.ts

 this.questionsData[i].question_type.title = "<ion-input type=\"text\" placeholder=\"Short answer\"></ion-input>";

detail.html

<ion-item  *ngFor="let question of questionsData">
      {{question.title}}
      <br>
      Text : {{question.question_type.title}}
      <br>
     <div   [innerHTML]="question.question_type.title">
    </div>
</ion-item>

不应该是文本下的输入框吗：，有谁知道为什么不渲染？

谢谢

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

InnerHtml 只会帮助在运行时呈现纯 html 代码，你不能使用 ionic 组件来使用 innerhtml 动态呈现。我认为您需要在 Angular 中使用动态组件加载器功能。您可以参考此链接了解此功能的用例https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36

【讨论】：

【解决方案2】：

您的方法需要改变，不要在组件块中包含 html 标签，而是将参数添加为 json 数据并将其设置在组件中。然后您可以在模板视图中插入标签。例如：

在组件处：

this.inputDataArray = [{"title":"What cartoon do you like to watch?", "name":"inp1","placeholder":"short answer"},{"title":"What movie do you like to watch?", "name":"inp2","placeholder":"short answer"}];

在视图中：

       <ion-item  *ngFor="let question of inputDataArray">
          {{question.title}}
          <br>
          Text : <input name={{question.name}} placeholder={{question.placeholder}} />
          <br>

    </ion-item>

仅供参考，希望对你有帮助

【讨论】：

非常感谢，这种方法对我来说更干净，我现在也使用 *ngIf，所以模板是在 html 文件上完成的，而不是在 ts 文件上
很高兴听到这个消息:)

【解决方案3】：

这对我有用。

<div [innerHTML]="data.text"></div>

【讨论】：