角テンプレートのforループでconditionがtrueの場合、要素にクラスを追加する方法は？

Question

私はAngular 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> 

だから、どの車でも問題ありません。それは最初の出現にのみ適用されます。 実際のものは以前とは異なり、それはそれだ場合...リストの最初の項目は常に、それはクラスが

がhttps://plnkr.co/edit/f3e1yQtKKACyeYRWxzJf?p=preview
はそれが役に立てば幸いこのplunkerでの作業を参照してください。設定されていますので、isFirstが必要とされているだけでチェック。