☰

angular2 [innerHtml] を動作させる方法 [重複] 質問する

tag-icon • tag-icon angular
angular2 [innerHtml] を動作させる方法 [重複] 質問する

エラーが報告されていないので、何が間違っているのかわかりません。

コンポーネントクラスがあります

import { Component, OnInit, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 testhtml = "<p>Hello world</p>";
    constructor(){}

 }

}

そして、テンプレート ファイルでは、次のようなことを行います。

<div class="blog-post">[innerHtml]="testhtml"</div>

しかし、これは機能しないようです。他にインポートする必要があるものはありますか?

私は angular-cli "version": "1.0.0-beta.26" を使用しています。

ベストアンサー1

Angularは値の補間に使用します。これは、次のよう{{property}}にプレーンテキストを表示する方法です。div

解決策1:

<div class="blog-post">{{testhtml}}</div>

しかし、それは HTML ではなくテキストを書き出します。

HTMLの場合は、プロパティにバインドする必要があります

解決策2:

<div class="blog-post" [innerHtml]="testhtml"></div>

[innerHtml]をタグ内に移動したことに注意してくださいdiv。

角括弧を省略すると属性にバインドされるため、再度補間する必要があります。

解決策3:

<div class="blog-post" innerHtml="{{testhtml}}"></div>

プロパティバインディング（解決策2) が推奨される方法です。

おすすめ記事