Erstellen von dynamischen Arrays in Angular2

Question

Ich baue eine Funktion von chart.js in meiner eckigen2 Webanwendung. Ich möchte, dass die Balken in einem Balkendiagramm rot oder grün sind, je nachdem, ob ihr Wert über oder unter einem bestimmten Schwellenwert liegt. Im Moment habe ich eine statische Lösung, die wie folgt aussieht:

public barChartLabels: string[] = ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00']; 
    public barChartType: string = 'bar'; 
    public barChartLegend: boolean = false; 

    public barChartData: any[] = [ 
    { 
     data: [85, 81, 80, 81, 56, 73, 70, 5, 0, 0, 65, 70, 83, 90, 85, 86, 84, 80, 87, 88, 82, 74, 71, 80], 
     label: 'Values' 
    } 
    ]; 
private colors = [ 
    { 
     backgroundColor: [ 
     'rgba(45, 227, 81, 0.2)', 
     'rgba(45, 227, 81, 0.2)', 
     'rgba(45, 227, 81, 0.2)', 
     'rgba(45, 227, 81, 0.2)', 
     'rgba(45, 227, 81, 0.2)', 
     'rgba(45, 227, 81, 0.2)' 
     // Potentially loads more colors 
     ] 
    } 
    ]; 

Dies ist jedoch chaotisch und fühlt sich an wie viel des Guten. Ich brauche eine Lösung, die die dynamische Aktualisierung meiner Daten unterstützt und einfach den Wert mit einem Schwellenwert vergleicht und die eine oder andere Farbe zurückgibt. Dies muss auf eine Weise geschehen, an die ich in einem Angular2 Template binden kann. Wie soll ich das machen?

Update:

Hier ist die html:

<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [colors]="colors" [options]="barChartOptions" [legend]="barChartLegend" 
    [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> 
</canvas> 

Answer 1

in Ihrem HTML:

...[colors]="getColors()"

In Ihrer .ts-Datei:

getColors() { 
    return [{ 
    backgroundColor: this.barChartData.map(d => d > threshold ? red : green) 
    }]; 
}