wake-up-neo.com

Angular 5 Material Spinner funktioniert nicht

Angular 5 Material Spinner funktioniert nicht

app.module.ts

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

komponente.ts

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

komponente.html

<mat-spinner></mat-spinner>

fehlt mir eine Konfiguration?

In Reference wird eine SVG-Datei für Spinner generiert, aber im mat-spinner-Tag ist nichts zu sehen.

angularangular-materialspinner
5
Developer

Ich habe versucht, das Beispiel für die Mattenschleuder zu spannen, und das funktioniert perfekt. Der einzige Unterschied, den ich sehen konnte, ist die Art und Weise, wie Sie das Progress-Spinner-Modul importieren, anstatt es aus einem bestimmten Pfad zu importieren.

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

Sie müssen nichts in Ihre Komponente importieren, da mat-progress Spinner um mat-Spinner erweitert wird. 

In der entsprechenden HTML-Datei tun Sie einfach das, was Sie gerade gemacht haben. 

<mat-spinner></mat-spinner>

Sie können einen Blick darauf werfen: https://stackblitz.com/angular/eymjpelkpro , was Ihnen vielleicht etwas mehr Kontext gibt.

2
MKant

[mode] = "determinate" << Dies wird nur den Kreis anzeigen, aber nicht drehen!

Zu 

[mode] = "'determinate'" // <<<< einfaches Anführungszeichen für konstanten Wert

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

Wie auch von Deanwilliammills erwähnt, Mode = "determinate"

6
hbthanki

Befreien Sie sich von [mode] = "determinate" 

Das funktionierte für mich ... __ Scheint, wie ein Bug, den Angular 5 Leute reparieren müssen

Mein Code:

Alt: 

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

Neu:

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