0

我是 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] 被认为是一个字符串有没有办法在角度编译这个语句..!!!

提前致谢

4

1 回答 1

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>
于 2017-07-28T20:29:48.133 回答