Angular 4 - скомпилировать [ngClass] внутри jquery append

Question

Я новичок в Angular 4. Пытаюсь динамически добавлять содержимое li с помощью методов $(). Append(). Я не могу скомпилировать и использовать директиву [ngClass].

jQuery рассматривает его как строку и добавляет в DOM. Я хотел бы скомпилировать его динамически выполнить как угловая 4 директива.

Массив, содержащий фиктивные данные, находится ниже.!

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

Зацикливание массива с использованием jQuery

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

Мой DOM контент:

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

[ngClass] считается строкой, есть ли способ скомпилировать этот оператор в угловых..!!!

заранее спасибо

Answer 1

Первое место, почему вы хотите сделать шаблон с jQuery, Вы можете легко сделать это угловым способом, перебирая коллекцию listOfAllColumns и сделать аналогичные шаблоны collection.length раз

Учебный класс

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>