html - Koşullu ifadelerle ngClass nasıl kullanılır

Mat simge öğemin rengi dinamik olarak değişmelidir.

<mat-icon class="temperature icon" svgIcon="thermometer-alert" matTooltip = {{temp_tooltip}}
          aria-label="Icon that displays a tooltip when focused or hovered over"
          [ngClass]= "{
            'safe' : 23 <= temp_tooltip <= 24.5,
            'alarm_lowside' : 21 <= temp_tooltip < 23,
            'alarm_highside' : 24.5 < temp_tooltip <= 26, 
            'critical_lowside' : temp_tooltip < 21,
            'critical_highside' : temp_tooltip > 26
           }" >
        </mat-icon>

temp_tooltip değeri component.ts içinde bağlanmıştır

ve css renk stiline sahip

.safe {
 color: green
}

.alarm_lowside {
    color: yellow
}

.alarm_highside {
    color: yellow
}

.critical_lowside {
    color: red
}

.critical_highside{
    color: red
}

critical_lowside ve critical_highside sınıflarıyla iyi çalışıyor, ancak diğer sınıflar için çalışmıyor. Nasıl düzeltilir. ngClass'ın tanımlanma şekli doğru mu?

Cevap #1

`23 <= temp_tooltip <= 24.5` JavaScript/TypeScript'te doğru bir ifade değildir.

Bu koşulu 23 <= temp_tooltip && temp_tooltip <= 24.5 gibi başka bir şekilde ifade etmenin yolunu bulmalısınız

Cevap #2

Doğru sözdizimi şöyle olur:

 [ngClass]= "{
        'safe' : temp_tooltip >= 23 && temp_tooltip <= 24.5,
        'alarm_lowside' : temp_tooltip >= 21 && temp_tooltip < 23,
        'alarm_highside' : temp_tooltip > 24.5 && temp_tooltip <= 26, 
        'critical_lowside' : temp_tooltip < 21,
        'critical_highside' : temp_tooltip > 26
   }"