Angular Material 进度条始终显示 100%

Question

我在 Angular 10 中的 Material Progress 栏上遇到了一个奇怪的问题。即使在设置之后，进度栏仍显示为 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 { }

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

Answer 1

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