如何將Angular 2 Material 2中的md-progress-spinner的顏色綁定到自定義顏色？

Question

我想使用md-progress-spinner來顯示已完成工作的百分比，但我想根據百分比動態地將它的筆觸顏色從紅色更改爲綠色。

我該怎麼做？

<md-progress-spinner 
    class="number" 
    mode="determinate" 
    [value]="today?.MemorizationPercent" 
    [style.background]="today?.MemorizationStateColor"> 
</md-progress-spinner> 

Answer 1

看一看demo-app例如https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner

您需要綁定到[color]財產。

然後在您的代碼中，您可以根據您的百分比值保留根據需要動態更改顏色的邏輯。 e.g：

模板：

<md-progress-spinner 
    class="number" 
    mode="determinate" 
    [value]="today?.MemorizationPercent" 
    [color]="getColor(today?.MemorizationPercent)"> 
</md-progress-spinner> 

功能getColor()樣本：

getColor(percentage) { 
    return percentage > 50 ? '_red_' : '_green_'; 
} 

你需要在你的自定義材質的調色板來定義顏色。

UPDATE：

重要通知您'_red_'和'_green_'顏色：

進度微調的顏色。可爲原發性，口音，或警告

按progress-spinner

源代碼 https://github.com/angular/material2/blob/master/src/lib/progress-spinner/progress-spinner.ts#L110

/** The color of the progress-spinner. Can be primary, accent, or warn. */ 
    @Input() 
    get color(): string { return this._color; } 
    set color(value: string) { 
    if (value) { 
     this._renderer.removeClass(this._elementRef.nativeElement, `mat-${this._color}`); 
     this._renderer.addClass(this._elementRef.nativeElement, `mat-${value}`); 
     this._color = value; 
    } 

所以getColor()變得像說：

getColor(percentage) { 
    return percentage > 50 ? 'accent' : 'warn'; 
} 

如果你不快樂與預生成主題，任何顏色比您必須創建我們自己的調色板，請參閱https://material.angular.io/guides瞭解更多詳情