innerhtml ist die Malerei nicht ngFor Vorlage richtig

Question

Ich verwende Winkel 2.0.0-rc.2,

Meine Ansicht ist, wie folgt:

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

Wert von defltPge Logik folgt

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

HTML sind wie folgt:

tabula~~POS=TRUNC 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> 

aber Tabula chat.html rendert nicht korrekt nur es zeigt nicht kompilierten Code, wie folgend:

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

Answer 1

Angular2 nicht Bindings in HTML verarbeiten, die dynamisch [innerHtml]=... oder element.appendChidl() oder ähnlich hinzugefügt werden.

Angular2 verarbeitet nur HTML statisch zu Komponentenvorlagen hinzugefügt.

Sie können Komponenten dynamisch mit ViewContainerRef.createComponent() hinzufügen. Angular 2 dynamic tabs with user-click chosen components zeigt ein Beispiel.