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]被认为是一个字符串有没有办法在angular .. !!!

中编译这个语句

提前致谢

Answer 1

首先，为什么要使用jQuery渲染模板？您可以通过循环收集集listOfAllColumns并使用类似模板collection.length次

来以Angular方式轻松完成此操作

<强>类

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>

Angular 4 - 在jquery中编译[ngClass]追加

1 个答案: