イオンアプリケーションのJSONオブジェクトからhtml要素を表示

Question

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> 

それはテキストの下の入力ボックスであるべきではない：それはレンダリングされていない理由は、誰もが知っていますか？

おかげ

Answer 1

アプローチを変更する必要があります。コンポーネントブロックに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> 

その、それは

Answer 2

innerHTMLプロパティは、あなたがinnerHTMLプロパティを使用して動的にレンダリングするイオン成分を使用することはできません、実行時に、純粋なHTMLコードをレンダリングするのに役立ちます。私はここで角度の動的コンポーネントローダー機能を使用する必要があると思います。この機能の使用例については、このリンクを参照することができますhttps://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36