在ngFor循環中添加類

如何在Angular 4的ngFor循環中爲內部元素添加不同的類？我說，我有一個片段：在ngFor循環中添加類

<div *ngFor="let article of articles"> 
    <div> 
    <h3>{{article.name}}</h3> 
    <p>{{article.body}}</p> 
    </div> 
</div>

所以我有2個問題：我怎麼每天產生的一篇文章中根據它們的順序（第一，第二，第三）不同類添加到H3元素和如何添加基於奇偶順序的h3元素類？

來源

2017-10-05 mikebrsv

只是一個方面：你所有的循環div都設置了相同的id，即字符串''article''，這可能會讓你陷入其他錯誤。 – Pac0

謝謝，那實際上不應該存在 – mikebrsv

您可以在ngForOf中獲得當前迭代的索引，奇數和偶數，並將其與ngClass結合使用，您可以設置該類。

<div *ngFor="let article of articles; index as i; even as isEven; odd as isOdd"> 
    <div id="article"> 
    <h3 [ngClass]="{'odd': isOdd, 'even': isEven}">{{article.name}}</h3> 
    <p>{{article.body}}</p> 
    </div> 
</div>

你沒有提到你想如何使用索引/位置，所以沒有代碼。我相信你可以根據上面的示例代碼和文檔來找出那部分。

正如@ Paco0還指出，也許你的意思id="article"是id="{{article.id}}"或類似的東西？

來源

2017-10-05 16:34:12 Igor

isEven是默認函數嗎？ –

只要id只是一個html屬性，「article.id」將是字符串「article.id」，而不是實際的文章ID。需要類似'id =「{{article.id}}」'來評估。 – Pac0

@artgb - 不，'even'和'isEven'是'even'的別名。 – Igor

在ngFor循環中添加類

回答

相關問題