Angular 4 - 在jquery append内编译[ngClass]

Question

我是Angular 4的新手，尝试使用$((.append((方法动态附加li内容。我无法编译和使用[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次以 Angular 方式轻松完成此操作

类

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

目录

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