角4 - 編譯[ngClass] jQuery的追加

裏面我是新來的4角，試圖動態追加李用$內容（）追加（）方法。我無法編譯和使用[ngClass]指令。角4 - 編譯[ngClass] jQuery的追加

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]被認爲是一個字符串是有辦法來編譯該語句在角.. ！

在此先感謝

來源

2017-07-28 user1688992

嘗試這樣的[ngClass] =」 {'activetick'：item.active}「 – Sreemat

我想從ts文件[組件文件]加載它。 tats我的場景。 – user1688992

第一名，爲什麼你想呈現模板，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>

來源

2017-07-28 20:29:48

爲什麼即時嘗試使用jQuery的原因是，我有一個組件的元素共享給其他組件。試圖從其他組件中加載元素ref的內容。內容將來自共享組件。還是有任何其他方式來實現tiz。 – user1688992

您可以使用'shared-service'將數據共享到組件，並基於相同的'listOfAllColumns'列值填充，'* ngFor'將在前端完成它的工作 –

角4 - 編譯[ngClass] jQuery的追加

回答

相關問題