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如下：

标签-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不会处理动态添加[innerHtml]=...或element.appendChidl()或类似内容的HTML中的绑定。

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

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

innerHtml没有正确地绘制ngFor模板

1 个答案: