我想使用 md-progress-spinner 来显示已完成工作的百分比，但我想根据百分比动态地将其笔触颜色从红色更改为绿色。
我该怎么做？
<md-progress-spinner
class="number"
mode="determinate"
[value]="today?.MemorizationPercent"
[style.background]="today?.MemorizationStateColor">
</md-progress-spinner>
【问题讨论】：
标签： angular angular-material angular-material2
在为我自己的问题寻找解决方案的同时阅读 cmets 后，我能够提出以下解决方案。这并不漂亮，但在他们打开颜色属性以接受超过三种颜色之前，这将作为一个临时解决方案。
微调器是一个 SVG 圆圈，因此可以通过 CSS 修改其属性。你可以用stroke改变圆的颜色，用fill改变圆的背景。
在 HTML 中：
<mat-spinner class="very-pink"></mat-spinner>
在 CSS 中：
.very-pink::ng-deep circle {
stroke: fuchsia;
}
这是一个指向 stackblitz 的链接。
编辑：感谢 ConquerorsHaki 指出这一点 - /deep/, >>> and ::ng-deep have been deprecated。目前它们仍然有效，人们希望在它们杀死它之前提供一个迁移脚本。也就是说，这不是最佳解决方案。
【讨论】：
看看demo-app例子https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner
您需要绑定到[color] 属性。
然后在您的代码中，您可以保留根据您的百分比值根据需要动态更改颜色的逻辑。例如：
模板：
<md-progress-spinner
class="number"
mode="determinate"
[value]="today?.MemorizationPercent"
[color]="getColor(today?.MemorizationPercent)">
</md-progress-spinner>
函数getColor()sample：
getColor(percentage) {
return percentage > 50 ? '_red_' : '_green_';
}
您需要在自定义材质调色板中定义颜色。
更新：
重要注意您的'_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 了解更多详情
【讨论】：
color='red', [color]='red', [color]='functionThatReturnsColor()', none of them work. It only accepts one of the three predefined primary, 重音, 警告颜色。
How to bind md-progress-spinner's color in Angular 2 Material 2?，最初的答案很简单，就像Use the [color] property。