web-dev-qa-db-fra.com

Angular 5 Material Spinner ne fonctionne pas

Angular 5 Material Spinner ne fonctionne pas

app.module.ts

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

composant.ts

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

composant.html

<mat-spinner></mat-spinner>

me manque-t-il une configuration?

Dans Référence , il génère un fichier SVG pour Spinner mais je ne vois rien dans la balise mat-spinner.

angularangular-materialspinner
5
Developer

J'ai essayé de donner l'exemple du tapis et de la spatule donnés et cela fonctionne parfaitement. La seule différence que j'ai pu constater est la manière dont vous importez le module progress spinner au lieu de l'importer depuis un chemin spécifique, procédez comme suit:

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

Vous n’avez rien à importer dans votre composant, car mat-spinner étend matprogressSpinner. 

Dans le code HTML approprié, faites ce que vous faisiez, c.-à-d. 

<mat-spinner></mat-spinner>

Vous pouvez consulter ceci: https://stackblitz.com/angular/eymjpelkpro , ce qui pourrait vous donner un peu plus de contexte.

2
MKant

[mode] = "determinate" << Ceci ne montrera que le cercle mais ne tournera pas!

À 

[mode] = "'déterminé'" // <<<< guillemet simple pour valeur constante

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

Aussi comme mentionné par deanwilliammills, Mode = "déterminé"

6
hbthanki

Débarrassez-vous de [mode] = "déterminé" 

Cela a fonctionné pour moi . Cela ressemble à un bug Angular 5 personnes doivent réparer

Mon code:

Vieux: 

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

Nouveau:

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