versucht, ngClass statt ngIf

Question

zu verwenden Ich würde diese NgIf über ngClass für einen kürzeren Code umschreiben. Leider wird die Klasse nicht akzeptiert. Kann das Problem gelöst werden?

The long Version: 

<div *ngIf="sp.outboundWeeks[i].status=='GREEN'"> 
             <div class="green"> 
              {{sp.outboundWeeks[i].utilizationRate}} 
             </div> 
            </div> 
            <div *ngIf="sp.outboundWeeks[i].status=='RED'"> 
             <div class="red"> 
              {{sp.outboundWeeks[i].utilizationRate}} 
             </div> 
            </div> 
            <div *ngIf="sp.outboundWeeks[i].status=='YELLOW'"> 
             <div class="yellow"> 
              {{sp.outboundWeeks[i].utilizationRate}} 
             </div> 
            </div> 

the short version should be like the code below: 

[ngClass]="{'green':cw.status[i]=='GREEN','yellow':cw.status=='YELLOW','red':cw.status=='RED'}">{{cw.utilizationRate}} 
    </div> 

Answer 1

try this:

<div> 
    <div [ngClass]="(sp.outboundWeeks[i].status=='GREEN') ? 'green' : 
     (sp.outboundWeeks[i].status=='RED') ? 'red' : 'yellow'"> 
     {{sp.outboundWeeks[i].utilizationRate}} 
    </div> 
</div> 

Answer 2

Abdul Rafay Lösungen ist schön, meine Lösung ist meiner Meinung nach expliziter und lesbar :)

<div> 
    <div [class.green]=" sp.outboundWeeks[i].status=='GREEN' " 
     [class.red]=" sp.outboundWeeks[i].status=='RED' " 
     [class.yellow]=" sp.outboundWeeks[i].status=='YELLOW' "> 
     {{sp.outboundWeeks[i].utilizationRate}} 
    </div> 
</div> 

Answer 3

Ich gehe davon aus, Ihre Objekte sind wie:

sp = { 
    outboundWeeks: [{ 
     status: 'GREEN', 
     utilizationRate: 'das', 
    }], 
    }; 
    cw = { 
    status: ['GREEN'], 
    utilizationRate: 'sad', 
    }; 

daher die Vorlage sho ULD

<div *ngIf="sp.outboundWeeks[0].status =='GREEN'"> 
     <div class="green"> 
     {{ sp.outboundWeeks[0].utilizationRate }} 
     </div> 
    </div> 
    <div *ngIf="sp.outboundWeeks[0].status=='RED'"> 
     <div class="red"> 
     {{ sp.outboundWeeks[0].utilizationRate }} 
     </div> 
    </div> 
    <div *ngIf="sp.outboundWeeks[0].status=='YELLOW'"> 
     <div class="yellow"> 
     {{ sp.outboundWeeks[0].utilizationRate }} 
     </div> 
    </div> 

    //SHORT HAND 
    <div [ngClass]="{'green': cw.status[0] === 'GREEN', 'yellow': cw.status[0] === 'YELLOW','red': cw.status[0] === 'RED'}"> 
     {{ cw.utilizationRate }} 
    </div> 

zu

ähnlich sein denke ich Ihre Iteration nicht korrekt ist ein bisschen anders als die längere Version, die Sie eingeführt haben, jedoch Coz die kurze Version ist, habe ich eine Probe-Objekt hinzugefügt, Ihnen zu zeigen, wie es funktionieren sollte .

Eine bessere Lösung könnte sein, einfach eine @Pipe zu erstellen, die die richtige Klasse zurückgibt. es sollte viel sauberer und schneller sein.

so etwas wie

<div [ngClass]="status | yourPipe"> 
     {{ cw.utilizationRate }} 
</div>