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%,至少在我的情况下是这样,但这是因为它的颜色都是相同的。一旦我定义了一些较浅的颜色,它就按预期工作了。