Angular Material进度条未显示在网页中答案

【问题标题】：Angular Material progress bar not showing in web pageAngular Material进度条未显示在网页中
【发布时间】：2017-11-07 09:44:04
【问题描述】：

我正在开发 Angular 4 框架。我想在我的应用主页上添加一个材质进度条。我遵循了 Angular Material 环境设置的官方指南。

之后，我在 .html 文件中添加了进度条的代码并编译。它没有在网页上更新。我该如何解决这个问题？

HTML代码是：

<mat-card>
  <mat-card-content>
    <h2 class="example-h2">Progress bar configuration</h2>

    <section class="example-section">
      <label class="example-margin">Color:</label>
      <mat-radio-group [(ngModel)]="color">
        <mat-radio-button class="example-margin" value="primary">
          Primary
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="accent">
          Accent
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="warn">
          Warn
        </mat-radio-button>
      </mat-radio-group>
    </section>

    <section class="example-section">
      <label class="example-margin">Mode:</label>
      <mat-radio-group [(ngModel)]="mode">
        <mat-radio-button class="example-margin" value="determinate">
          Determinate
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="indeterminate">
          Indeterminate
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="buffer">
          Buffer
        </mat-radio-button>
        <mat-radio-button class="example-margin" value="query">
          Query
        </mat-radio-button>
      </mat-radio-group>
    </section>

    <section class="example-section" *ngIf="mode == 'determinate' || mode == 'buffer'">
      <label class="example-margin">Progress:</label>
      <mat-slider class="example-margin" [(ngModel)]="value"></mat-slider>
    </section>
    <section class="example-section" *ngIf="mode == 'buffer'">
      <label class="example-margin">Buffer:</label>
      <mat-slider class="example-margin" [(ngModel)]="bufferValue"></mat-slider>
    </section>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-content>
    <h2 class="example-h2">Result</h2>

    <section class="example-section">
      <mat-progress-bar
          class="example-margin"
          [color]="color"
          [mode]="mode"
          [value]="value"
          [bufferValue]="bufferValue">
      </mat-progress-bar>
    </section>
  </mat-card-content>
</mat-card>

而对应的component.ts文件代码为

@NgModule({

  imports: [MatButtonModule, MatCheckboxModule],

})
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent  {
  color = 'primary';
  mode = 'determinate';
  value = 50;
  bufferValue = 75;
}

【问题讨论】：

控制台有输出吗？你能给我们你的材料版本吗？他们的组件的前缀发生了一些变化。
仪表板中没有输出。什么都不可见。
@angular/material": "^2.0.0-beta.12
其他一些材质组件，如单选按钮、复选框等作为输出可见。但进度条不可见。
在浏览器中检查inspector。（例如在 DevTools 中的chrome 中有标签elements）如果在 html 文件中生成 mat-progress-bar，还要检查我的答案，可能导入有问题。

标签： html angular typescript progress-bar angular-material

【解决方案1】：

据我所知，缺少导入。您必须将此添加到您的@NgModule

import {MatProgressBarModule} from '@angular/material';

在@NgModule

imports: [MatButtonModule, MatCheckboxModule, MatProgressBarModule],

【讨论】：

添加了但没有结果
谢谢。为什么官方getting started 教程中遗漏了这个魔法？！

【解决方案2】：

您必须将此主题或任何预构建的主题添加到您的 css 文件中

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

【讨论】：

【解决方案3】：

我遇到了一个奇怪的问题。我的容器（div）显示为flex，即使我将高度设置为4px，这也会以某种方式呈现具有0 height 的进度条。我不知道它是如何以及为什么发生的。所以我将进度条包裹在另一个容器中（div，默认显示），进度条开始显示。

【讨论】：

【解决方案4】：

如果您已导入以下模块，请尝试将其删除

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

【讨论】：

是的，那是 noopanimations

【解决方案5】：

也许我为时已晚，但自从上次更新角度材料后，导入更改为：

import { MatProgressBarModule } from '@angular/material/progress-bar';

希望这会有所帮助。

【讨论】：

【解决方案6】：

您可能需要在应用中导入 BrowserAnimationsModule。查看链接https://material.angular.io/guide/getting-started，了解如何安装它。根据您的示例，还尝试将具有类 example-section 的部分设置为 100% 宽度。希望对您有所帮助。

【讨论】：

【解决方案7】：

我的问题是进度条 div 的宽度和高度为 0。将进度标签包裹在一个 div 周围，并给它一个 progress-div 类。然后将此代码添加到您的 css：

.progress-div{
    height: auto;
    width: auto;
}

【讨论】：