Angular Material进度条一直显示100%

Question

我运行在 Angular 10 中 Material 进度条遇到了一个 st运行ge 问题。即使在设置之后进度条仍显示为 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 模块都按预期工作，并且如前所述，进度条确实呈现但它似乎没有注意到“值”属性

Answer 1

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

Angular Material进度条一直显示100%

Angular Material Progress bar always showing 100%

progress-bar

angular-material

angular