Angular 5 Material Spinner is not working

问题

app.module.ts

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@NgModule({
  imports: [
    MatProgressSpinnerModule
  ]})

component.ts

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

component.html

<mat-spinner></mat-spinner>

am I missing any configuration.?

In Reference, it's generating an SVG file for Spinner but I don't see anything inside mat-spinner tag.

回答1:

I tried to fork the mat-spinner example given and that works perfectly. The only difference that I could see is the way you import the progress spinner module instead of importing it from a specific path do this:

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

You don`t need to import anything inside your component as mat-spinner extends matprogressSpinner.

Inside the relevant html just do what you were doing i.e.

<mat-spinner></mat-spinner>

You can have a look at this: https://stackblitz.com/angular/eymjpelkpro which might give you some more context.

回答2:

[mode]="determinate" << This will only show the circle but will not spin!

[mode]="'determinate'" // <<<< single quote for constant value

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Also as mentiond by deanwilliammills, mode = "determinate"

回答3:

Get rid of [mode]="determinate"

That worked for me. Seems like a bug Angular 5 people need to fix

My Code:

Old:

<mat-progress-spinner
    class="progressSpinner"
    [color]="myCustomColor"
    [mode]="determinate"
    [value]="myCustomValue">
</mat-progress-spinner>

New:

<mat-progress-spinner
    class="progressSpinner"
    [color]="myCustomColor"
    [value]="myCustomValue">
</mat-progress-spinner>

回答4:

In your component class you have to declare when to show and when to hide the spinner using

spinner.show();

spinner.hide();

You can also use ngx-spinner https://www.youtube.com/watch?v=5wzn5HDq0rk&

来源：https://stackoverflow.com/questions/48740348/angular-5-material-spinner-is-not-working

标签

angular

angular-material

spinner