Angular 5材料旋转器无法工作。

Question

Angular 5的材料旋转器无法正常工作

app.module.ts

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

组件.ts

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

组件.html

<mat-spinner></mat-spinner>

我是否遗漏了任何配置?

在参考中，它为Spinner生成SVG文件，但我在mat-spinner标签中没有看到任何内容。

- Developer

---

你得到了什么错误？ - Suren Srapyan

我在控制台中没有看到任何错误。它没有出现在浏览器中，我进行了检查，但我没有看到任何更改。 - Mohammad Fareed

也许颜色是透明的？ - Suren Srapyan

<mat-spinner _ngcontent-c13></mat-spinner> 这是我在控制台中看到的.. 我尝试了改变颜色但仍然不行。 - Mohammad Fareed

这里提供一个演示会很有帮助。 - Vega

我也遇到了同样的问题。使用spinner和mat-icon时出现问题...但像输入框这样的其它元素都能正常工作。 - Celso Soares

Answer 1

我尝试复制 mat-spinner 的示例，这样做完全正常。唯一的区别是导入进度旋转器模块的方式，不是从特定路径导入，而是这样做：

我尝试分叉给定的 mat-spinner 示例，它运行得很完美。唯一的区别是导入进度旋转器模块的方式，与从特定路径导入不同，要这样做：

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

你不需要在组件内导入任何内容，因为mat-spinner扩展了matprogressSpinner。

在相关的HTML中，只需按照您以前所做的方式进行操作，即

<mat-spinner></mat-spinner>

你可以看一下这个：https://stackblitz.com/angular/eymjpelkpro，这可能会为你提供更多的上下文。

- Manit

---

现在 Spinner 已经出现了，但我在浏览器中看不到它，我该如何更改 Spinner 的颜色属性？ - Mohammad Fareed

你只需要在 mat-progress-spinner 中传递颜色属性，例如： <mat-progress-spinner class="example-margin" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner> - Manit

请查看此链接：https://stackblitz.com/angular/pbrmanaovrd?file=app%2Fprogress-spinner-configurable-example.html。我建议您阅读文档和示例。我认为这将解决您所有的问题。希望能有所帮助。 - Manit

Answer 2

[mode]="determinate" << 这将仅显示圆圈，但不会旋转！

改为

[mode]="'determinate'" // <<<< 单引号用于常量值

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

正如deanwilliammills所提到的， mode = "determinate"

- hbthanki

Answer 3

对我来说，关键是要导入BrowserAnimationsModule。 我正在使用Angular 10。

在您的app.module.ts文件中： import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

在imports数组中添加BrowserAnimationsModule 。

- canbax

---

我有一个 NoOptionAnimationModule 模块，它取消了 BrowserAnimationModule 的效果。干杯！ - sathish_at_madison

Answer 4

我曾遇到一个特殊情况，在控制台或编译中没有任何错误提示，但是在DOM中mat-spinner没有显示出来。原因是我忘记将使用mat-spinner的组件添加到模块的declarations数组中了...

import { NgModule } from '@angular/core';
import { MaterialModule } from '../../../global/material/material.module';
import { YourComponent} from './your.component';

@NgModule({
    declarations: [YourComponent], // <--- here this
    imports: [
        MaterialModule
    ],
})
export class SomeModule {}

- knnhcn

Answer 5

去掉 [mode]="determinate"

这对我有用。 看起来像是 Angular 5 的一个 bug 需要修复

我的代码：

旧的：

<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>

- David

Answer 6

如果您在 app.module.ts 中导入 BrowserAnimationsModule，则可以支持任何类型的动画。

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

- Jathin

Answer 7

对我来说，导入是正确的，但我忽略了控制台中关于缺少 Angular 核心主题的错误消息。

在主要的 style.scss 文件中导入一个主题可以解决这个问题。 @import "@angular/material/prebuilt-themes/deeppurple-amber.css";

- bRo

Answer 8

我遇到了这个错误 main.ts:5 Error: <circle> attribute r: A negative value is not valid. ("-2.5")（使用 Material 的 16 版本），谷歌给我返回了这个页面作为第一个结果。

如果其他人也遇到了这个错误，那是因为我设置了 strokeWidth > diameter。也就是说，描边宽度不能大于直径。

- O-9

Answer 9

在你的组件类中，你必须声明何时显示和隐藏旋转器，使用：

spinner.show();

spinner.hide();

- Tushar Adlakha