Question

我有一个Angular 5项目，正在使用材质进度栏。我想使用自定义颜色。我已经尝试了几种解决方法（包括之前的SO问题），但是无法破坏代码。我想根据进度百分比更改颜色。 HTML：

<mat-progress-bar *ngIf="cell.name === 'progress'" [value]="cell.value" 
    class="mat-progress-bar-round my-color" [ngClass]="'color ' + ((cell.value <= 
     30) ? 'color-red' : (cell.value < 70) ? 'color-yellow' : 'color-green')">   
    </mat-progress-bar>`

ass（css）：

   mat-progress-bar {
      &.mat-progress-bar-big {
        padding: 13px 0;
      }

      &.mat-progress-bar-round {
        border-radius: 11px;
        height: 6px;

        .mat-progress-bar-buffer {
          background-color: $grey3;
        }

        .mat-progress-bar-fill {
          &::after {
            border-radius: 11px;
          }
        }

        &.color {
          .mat-progress-bar-fill {
            &::after {
              animation: none;
              content: '';
              display: inline-block;
              left: 0;
            }
          }

          &.color-red {
            .mat-progress-bar-fill {
              &::after {
            background-color: $red;
              }
            }
          }

          &.color-yellow {
            .mat-progress-bar-fill {
              &::after {
                background-color: $yellow;
              }
            }
          }

          &.color-green {
            .mat-progress-bar-fill {
              &::after {
                background-color: $green;
              }
            }
          }

          &.color-aqua {
            .mat-progress-bar-fill {
              &::after {
                background-color: $aqua;
              }
            }
          }
        }
      }
    }

任何帮助都非常感谢...：-）

Answer 1

在.ts文件中设置颜色对我有用

<mat-progress-bar [value]="cell.value"  [color]="cell.color">   
</mat-progress-bar>

和.ts文件中

cell.color = 'primary'; //predefined color in default theme

我相信您可以用自定义颜色替换“原色”

角度材质进度条，使用自定义颜色

1 个答案: