如何在角度模板中的for循环中条件为真的元素上添加类？

问题描述：

我曾参与过angular 4项目。在这个项目中，我有要求在for循环创建的元素上添加类。但是我只想动态地添加类，意味着当条件遇到第一次它在元素上添加类时，但之后如果相同条件再次遇到它不会添加类。我有四处看看我的文章，但没有得到任何解决方案。如果有人知道请让我知道。提前致谢！如何在角度模板中的for循环中条件为真的元素上添加类？

HTML

<ng-container *ngFor="let car of cars"> 
    <div *ngIf="car.name == 'audi'"> 
     // WHEN FIRST TIME CAR NAME IS EQUAL TO AUDI THEN ADD 'first-luxury-car' class on div. 
    </div> 
</ng-container>

打字稿

cards = [ 
    {"name": "maruti", "model": "Alto"}, 
    {"name": "audi", "model": "A1" }, 
    {"name": "audi", "model": "A5" } 
];

请显示您的尝试。 [问] –

你有没有试过我建议的？很高兴有一个反馈来帮助社区。 –

答

可以使用局部变量index，first和ngClass达到你想要的东西。像这样

<ng-container*ngFor="let car of cars; index as i; first as isFirst"> 
    <div [ngClass]="{'first-luxury-car': isFirst || cars[i].name !== cars[i-1].name}"> 
     {{car.name}} 
    </div> 
</ng-container>

所以......哪辆车是没关系的，它只适用于它的第一次出现。只是检查是否与实际是从以前的不同，这就是它......是需要isFirst因为列表的第一项将总是有它类设置

请参阅本plunker工作https://plnkr.co/edit/f3e1yQtKKACyeYRWxzJf?p=preview
希望它可以帮助。

我想先选择要显示的选项卡。 –

Plunker示例https://plnkr.co/edit/2UPBf67y2ExmLaePP3VV?p=preview –

请检查它。 –

如何在角度模板中的for循环中条件为真的元素上添加类？

相关推荐