Question

我想使用md-progress-spinner来显示已完成工作的百分比，但我想根据百分比动态地将它的笔触颜色从红色动态更改为绿色。

我该怎么做？

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

Answer 1

在寻找我自己的问题的解决方案阅读评论后，我能够提出以下修复。它并不漂亮，但是在它们打开颜色属性以接受三种以上的颜色之前，这将作为临时解决方案。

微调器是一个SVG圈，因此可以通过CSS修改它的属性。您可以使用笔划更改圆圈的颜色，使用填充更改圆圈的背景。

在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 。目前他们仍在工作，人们希望在杀死之前提供迁移脚本。也就是说，这不是最佳解决方案。

Answer 2

查看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_';
}

您需要在自定义材质调色板中定义颜色。

<强>更新

对'_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以获取更多详细信息

如何将Angular 2 Material 2中的md-progress-spinner颜色绑定到自定义颜色？

2 个答案: