角度材质进度条始终显示 100%

Mus*_*tel 2 progress-bar angular-material angular

我在 Angular 10 中的材质进度条上遇到了一个奇怪的问题。即使在设置之后,进度条仍显示为 100%,其值较小:

我的 component.html 中的代码非常简单:

<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
Run Code Online (Sandbox Code Playgroud)

渲染正常,但显示为 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 {
  }

}
Run Code Online (Sandbox Code Playgroud)

在我的 app.module.ts 文件中,我导入 Material UI,如下所示:

import { MaterialModule } from './modules/material.module';
Run Code Online (Sandbox Code Playgroud)

./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 { }

Run Code Online (Sandbox Code Playgroud)

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

小智 5

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