Angle 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

はあなたが[color]プロパティにバインドする必要がdemo-app例https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner

を見てください。

次にコードでは、パーセンテージ値に基づいて必要に応じて色を動的に変更するロジックを保持できます。例えば：

テンプレート：

<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ソースコードを1として

に警告することができる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を参照してください。