2016-04-28 4 views
2

dummy-data.tsファイルにこのオブジェクトがあります。サービスを通じて、私はそれを首尾よくapp.component.tsに引き出します。私のテンプレート(Angular2/TypeScript)でHTML文字列をHTMLに変換するにはどうしたらいいですか?

現在
{name:"Object1", 
    prop1: {key:'value', key:'value'}, 
    password: "[email protected]", 
    htmlText:'<h4>This is THE demo text</h4><p>I want it to display as HTML</p>' 
} 

app.component.ts単純に開始するには、次のようになります。

@Component({ 
    selector: 'my-app', 
    template: `<h1>{{title}}</h1> 
     <p *ngFor="#plot of plots"> 
      {{plot.personalPanelText.transition}} 
     </p> 
`, 
providers: [PlotService] 
}) 

最終結果ではなく、HTMLの文字列です。私はHTMLをコードで、HTMLタグではなくテキストにします。

私はいくつかの方法で試してみましたが、世界規模のネットとAngular2のドキュメントを突っ込んできましたが、解決策が見つかりませんでした。

ありがとうございます!

+0

私はあなたのオブジェクトを格納する場所がわからないので、私の答えのコードがあなたのニーズに正確に合わないかもしれません。単にコメントを追加するか、詳細を追加して質問を更新してください。 –

+1

JavaScriptでは、HTMLは文字列としてのみ発生します。このように、私はあなたが何を意味するのか理解していません。「最終結果はHTMLではなく文字列です。HTMLをコードで、HTMLタグではなくHTMLにします。 –

答えて

9

はあなたのようinnerHtmlにバインドすることができます

<div [innerHtml]="someProp.htmlText"></div> 

角度は、タグに一致するか、HTMLの属性セレクタは、このよう追加されたコンポーネントをインスタンス化しておらず、

{{xx}}のような)任意のバインディングを解決します

も参照How to bind raw html in Angular2

+0

パーフェクト!ありがとう – McPhelpsius

関連する問題