HTML字符串无法正确显示

Question

已经有一段时间了，我知道有一个解决方案。我正在从Firebase 3中检索一个对象。该字段是一个包含html的字符串。我将值插入Angular2 component.html。有没有一种方法，函数调用，方法来呈现Angular2中没有<b>标签的html？

   key: Description
   value: <p>Hello World</p>

在我的Angular组件HTML

中

   <h3>Description</h3><div>{{something.Description}}</div>

html呈现为：

Answer 1

实现这一目标的几种方法：

1）请尝试使用角度的.append方法。

<h3>Description</h3><div id='divID'></div>

var myElement = angular.element( document.querySelector( '#divID' ) );
myElement.append('<p>Your values/variables</p>');

2）对于Angular 2：

<div [innerHTML]="theHtmlString">
</div>

3）对于那些仍然使用Angular 1 vs 2的人：

另一种方式是ng-bind-html，类似的东西：

HTML

<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
</div>

JS

angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.myHTML =
     '<h3>Description:</h3>' +
     '<div> YOUR VARIABLES </div>';
}]);

Answer 2

ng-bind-html（正如许多人所建议的那样）不是Angular2解决方案。请改用[innerHTML]。

<div [innerHTML]="something.Description"></div>