Question

我正在研究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;
}

Answer 1

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

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

并在@NgModule

imports: [MatButtonModule, MatCheckboxModule, MatProgressBarModule],

Answer 2

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

int a[10]; void* p1 = static_cast<void*>(&a[0]); void* p2 = static_cast<void*>(&a); int* i1 = static_cast<int*>(p1); int* i2 = static_cast<int*>(p2);

希望这有帮助。

Answer 3

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

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

Answer 4

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

Answer 5

我有一个奇怪的问题。我的容器（div）显示为flex，尽管我将高度设置为0 height，但仍以某种方式呈现了具有4px的进度条。我不知道它是如何发生的以及为什么发生。因此，我将进度条包装在另一个容器中（默认显示为div），进度条开始显示。

Answer 6

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

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

Answer 7

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

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

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

7 个答案: