Property Bindung an Funktion

Question

Ich versuche, die Hintergrundfarbe eines Elements an eine Funktion zu binden:

<td [style.background-color]="patientService.getSeverityColor(interval.averageSeverity)">{{interval.earliestTime}}-{{interval.latestTime}}</td> 

Das hat funktioniert, aber es funktioniert nicht mehr und ich bin nicht warum. Soll ich sogar Eigenschaften an Funktionen binden, oder sollte ich das nur mit Komponenteneigenschaften tun?

Der Grund, warum ich tue, ist, dass interval.averageSeverity eine Zahl, die eine bestimmte Farbe darstellt, so dass ich das Bestehen der Nummer an die Funktion und es gibt die Farbe:

getSeverityColor(severity: number) { 
switch (severity) { 
    case -1: 
    return "grey"; 
    case 0: 
    return "green"; 

    case 1: 
    return "yellow"; 

    case 2: 
    return "orange"; 

    case 3: 
    return "red"; 

} 
} 

Wenn i Kann ich nicht an eine Funktion binden, haben Sie Vorschläge, wie ich das lösen könnte? Vielen Dank.

EDIT, mehr Code:

<div class="patients-container" (dragover)="allowDrop($event)" (drop)="onDrop($event)"> 
    <div class="patient-box level-1" draggable="true" *ngFor="let bed of beds" (dragstart)="onDrag($event, bed)"> 
    <div class="location-header"> 
     <p class="location" (click)="openEditPatientDialog(bed)">{{bed.philipsName}}<md-icon>edit</md-icon></p> 
     <p class="name" [hidden]="bed.patientName == ''">{{bed.patientName}}</p> 
     <p class="O2" [hidden]="!additionalO2"><img (click)="toggleO2()" src="../../assets/med_O2.png"></p> 
     <p class="O2" [hidden]="additionalO2"><img (click)="toggleO2()" src="../../assets/no_O2.png"></p> 
     <p class="triage"><md-icon [style.color]="patientService.getSeverityColor(bed.absoluteSeverity)">favorite</md-icon></p> 
    </div> 
    <div class="intervals-header"> 
     <table> 
     <tr *ngFor="let interval of bed.timeWindows"> 
      <td [ngStyle]="{'background-color': patientService.getSeverityColor(interval.averageSeverity)}">{{interval.earliestTime}}-{{interval.latestTime}}</td> 
     </tr> 
     </table> 
    </div> 
    </div> 
</div> 

Answer 1

Verwendung ngStyle.

<td [ngStyle]="{'background-color': patientService.getSeverityColor(interval.averageSeverity)}">{{interval.earliestTime}}-{{interval.latestTime}}</td> 

Sie könnten wahrscheinlich haben, um eine Standard angeben number (oder eine Standardfarbe String-Wert innerhalb der Methode zurück), so dass das Verfahren eine gültige Farbe Zeichenfolge standardmäßig zurück.

Zum Beispiel, wenn Sie standardmäßig zurück 'grey' möchten, fügen Sie diese an Ihre Methode,

getSeverityColor(severity: number) { 
switch (severity) { 
    case -1: 
    return "grey"; 
    case 0: 
    return "green"; 

    case 1: 
    return "yellow"; 

    case 2: 
    return "orange"; 

    case 3: 
    return "red"; 

    default: 
    return "grey"; 

} 
}