Question

我参与了角度4项目。在这个项目中，我需要在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" }
];

Answer 1

您可以使用本地变量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是必需的，因为列表的第一项将始终具有类集

查看此弹药https://plnkr.co/edit/f3e1yQtKKACyeYRWxzJf?p=preview的工作情况希望它有所帮助。

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

1 个答案: