innerHtml 未正确绘制 ngFor 模板

Question

我正在使用角度 2.0.0-rc.2，

我的看法如下：

<div *ngFor="let kp of defltPge;let i=index" class="col-sm-4">
    <div class="iii" [innerHtml]="kp['content']"></div>
</div>

defltPge 逻辑的值如下

let tt4 = require('./dashStatic/tab-chat.html');
let tt5 = require('./dashStatic/tabs.html');
defltPge:[
    {
      "content":tt5
    },
    {
      "content":tt4
    }];

HTML如下：

tab-chat.html

<div class="item-remove-animate item-avatar item-icon-right item item-complex item-right-editable" *ngFor="let chat of chats">
      <a class="item-content">
        <img src="img/ben.png" src="img/ben.png">
        <h2 class="ng-binding">{{chat.name}}</h2>
        <p class="ng-binding">{{chat.lastText}}</p>
        <i class="fa fa-chevron-right"></i>
      </a>
    </div>

tabs.html

<h1>
    Dashboard
  </h1>

但是 tab-chat.html 没有正确呈现它只是显示未编译的代码如下：

{{chat.name}}
{{chat.lastText}}

Answer 1

Angular2 不处理 HTML 中动态添加的 [innerHtml]=... 或 element.appendChidl() 或类似的绑定。

Angular2 只处理静态添加到组件模板的 HTML。

您可以使用ViewContainerRef.createComponent() 动态添加组件。 Angular 2 dynamic tabs with user-click chosen components 显示了一个示例。