Html 角度材质进度条未显示在网页中

我在Angular 4框架上工作。我想在我的应用程序主页上添加一个重要的进度条。我按照官方指南为角材料环境设置

之后，我在.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>

---

据我所知，缺少进口。您必须将其添加到

@NgModule

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

imports: [MatButtonModule, MatCheckboxModule, MatProgressBarModule],

在

@NgModule

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

imports: [MatButtonModule, MatCheckboxModule, MatProgressBarModule],

---

据我所知，缺少进口。您必须将其添加到

@NgModule

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

imports: [MatButtonModule, MatCheckboxModule, MatProgressBarModule],

在

@NgModule

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

imports: [MatButtonModule, MatCheckboxModule, MatProgressBarModule],

---

也许我已经太迟了，但自从上次角度材质更新后，导入更改为：

从“@angular/material/progressbar”导入{MatProgressBarModule}

希望这有帮助。
也许我做这件事太迟了，但自从上次角材质更新以来，导入更改为：

从“@angular/material/progressbar”导入{MatProgressBarModule}

希望这有帮助。
您必须将此主题或任何预构建的主题添加到css文件中

@导入“~@angular/material/prebuild themes/deeppurple amber.css”
 您必须将此主题或任何预构建主题添加到css文件中

@导入“~@angular/material/prebuild themes/deeppurple amber.css”
 您可能需要在应用程序中导入BrowserAnimationsModule。查看有关如何安装的链接。
根据您的示例，还可以尝试将带有类示例的部分设置为100%宽度。
希望有帮助。
您可能需要将BrowserAnimationsModule导入应用程序。查看有关如何安装的链接。
根据您的示例，还可以尝试将带有类示例的部分设置为100%宽度。
希望能有帮助。
我遇到了一个奇怪的问题。我的容器（
div
）显示为
flex
，这在某种程度上使进度条具有
0高度
，即使我将高度设置为
4px
。我不知道这是怎么发生的，为什么发生的。因此，我将进度条包装在另一个容器中（
div
，默认显示），进度条开始显示。
我遇到了一个奇怪的问题。我的容器（
div
）显示为
flex
，这在某种程度上使进度条具有
0高度
，即使我将高度设置为
4px
。我不知道这是怎么发生的，为什么发生的。因此，我将进度条包装在另一个容器中（
div，默认显示），进度条开始显示。
我的问题是进度条div的宽度和高度为0。将进度标记环绕在一个div上，并给它一个
progressdiv
类。然后将以下代码添加到css中：

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

我的问题是进度条div的宽度和高度为0。将进度标记环绕在一个div上，并给它一个
progressdiv
类。然后将以下代码添加到css中：

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

您在控制台中有任何输出吗？你能给我们你的材料版本吗？组件的前缀发生了一些更改。仪表板中没有输出。任何内容都不可见。@angular/material:“^2.0.0-beta.12一些其他材质组件（如单选按钮、复选框等）可以作为输出显示。但进度条不可见。请在浏览器中签入
检查器
。（例如，在DevTools的
chrome
中有tab
元素
）如果在html文件中生成了mat进度条，也请检查我的答案，可能是导入有问题。控制台中有任何输出吗？你能给我们你的材料版本吗？组件的前缀发生了一些更改。仪表板中没有输出。任何内容都不可见。@angular/material:“^2.0.0-beta.12一些其他材质组件（如单选按钮、复选框等）可以作为输出显示。但进度条不可见。请在浏览器中签入
检查器
。（例如，在DevTools中的
chrome
中有选项卡
元素
）如果在html文件中生成了mat进度条，也请检查我的答案，可能是导入有问题。它已添加，但没有结果thx。为什么官方教程没有提到这个魔术？！已添加，但没有结果thx。为什么官方教程没有提到这个魔术？！