Angular 4 - Kompilieren [ngClass] innerhalb jquery append

Question

Ich bin neu in Angular 4, Anprobieren dynamisch li Inhalt $() mit anhängen anhängen() Methoden.. Ich bin nicht in der Lage zu kompilieren und zu verwenden [ngClass] Direktive.

jQuery betrachtet es als String und hängt an DOM an. Ich möchte es dynamisch kompilieren, die als eine eckige 4-Anweisung ausführen.

Array mit Dummy-Daten ist unten.

let listOfAllColumns = [ 
     { name: "name", active: false }, 
     { name: "ConnectionType", active: true }, 
     { name: "Type", active: false }, 
    ]; 

Looping obwohl Array mit jQuery

 listOfAllColumns.forEach(item => { 
     $(this.sortElement).append("<li><a href= 'javascript:;' [ngClass]='{'activeTick': "+ item.active +"}'>"+ item.name +"</a></li>"); 
    }); 

Mein DOM Inhalt:

<a href="javascript:;" [ngClass]="{" activetick':="" false}'="">name</a> 

[ngClass] als String betrachtet ist es eine Möglichkeit, diese Aussage in Winkel zu kompilieren .. !!!

Vielen Dank im Voraus

Answer 1

Erster Platz, warum würden Sie Vorlage mit jQuery machen möchten. Sie können tun es in Angular Weise leicht durch listOfAllColumns über Sammlung Looping und ähnliche Vorlagen collection.length mal

Klasse

listOfAllColumns = [ 
    { name: "name", active: false }, 
    { name: "ConnectionType", active: true }, 
    { name: "Type", active: false }, 
]; 

Html

<ul> 
    <li *ngFor="let item in listOfAllColumns" 
     [ngClass]="{'activeTick': item.active }"> 
     {{item.name}} 
    </li> 
<ul>