web-dev-qa-db-ja.com

Angular 5 Material Spinnerが機能していません

Angular 5 Material Spinnerが機能していません

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>

設定がありません。

参照 では、Spinner用のSVGファイルを生成していますが、mat-spinnerタグ内には何も表示されません。

angularangular-materialspinner
11
Developer

私は与えられたマットスピナーの例をフォークしようとしましたが、それは完全に機能します。私が見ることができる唯一の違いは、特定のパスからインポートするのではなく、進捗スピナーモジュールをインポートする方法です。

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

Mat-spinnerはmatprogressSpinnerを拡張するため、コンポーネント内に何もインポートする必要はありません。

関連するhtml内で、あなたがやっていたことを行うだけです。

<mat-spinner></mat-spinner>

これを見ることができます： https://stackblitz.com/angular/eymjpelkpro .

8
MKant

[mode] = "determinate" <<これは円のみを表示し、回転しません！

に

[mode] = "'determinate'" // <<<<定数値の単一引用符

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 〜〜〜〜〜 ~~ 〜〜〜〜

また、deanwilliammillsが言及したように、mode = "determinate"

11
hbthanki

[mode] = "determinate"を取り除きます

それは私のために働いた。バグのようですAngular 5人が修正する必要があります

私のコード：

旧：

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

新着：

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