Angular 材质进度条始终显示 100%答案

【问题标题】：Angular Material Progress bar always showing 100%Angular 材质进度条始终显示 100%
【发布时间】：2020-07-30 12:29:10
【问题描述】：

我在 Angular 10 中的材质进度条遇到了一个奇怪的问题。进度条显示为 100%，即使在将其值设置为更低的情况下也是如此：

我的component.html中的代码很简单：

<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

渲染正常，但显示为 100%

我看不出我在这里可能做错了什么。

下面是我的组件文件的内容：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

在我的 app.module.ts 文件中，我正在导入 Material UI，如下所示：

import { MaterialModule } from './modules/material.module';

./modules/material.module.ts的内容如下：

import { NgModule } from '@angular/core';

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';

const modules = [
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    MatButtonModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatSnackBarModule,
    MatProgressBarModule
];

@NgModule({
    imports: modules,
    exports: modules,
})

export class MaterialModule { }

所有其他材质模块都按预期工作，并且如前所述，进度条确实呈现，但似乎没有注意到“值”属性

【问题讨论】：

当您提供单行代码时，即使我们看不到您可能做错了什么，也需要更多上下文。请显示您的打字稿和模板文件中还有什么。
谢谢，我在我的问题中添加了更多代码。我的测试内容很少，页面上只有材料进度条。

标签： angular angular-material progress-bar

【解决方案1】：

我知道这已经开放了一段时间，但我刚刚遇到了同样的问题，这让我发疯了。在我的例子中，我为材质定义了一个自定义主题，并且只定义了一种颜色。所以虽然进度条看起来总是 100%，至少在我的情况下，这是因为它都是相同的颜色。一旦我定义了一些较浅的颜色，它就会按预期工作。

【讨论】：

这也是我的问题，感谢您分享您的发现