Angular2 Material2 <md-spinner> 未显示但正在运行

Question

我的假设是我的 css 不正确，但是我想不通。

<div *ngIf="loading">
  <md-progress-circle mode="indeterminate" color="warn">Loading...</md-progress-circle>
</div>
<md-list>
  <md-list-item *ngFor="let incident of incidents">
    <h3 md-line> {{name}} </h3>
    <p md-line>
      <span>{{date}} > </span>
      <span>{{text}}</span>
    </p>
  </md-list-item>
</md-list>

Answer 1

变化：

[颜色]="'warn'" [模式]="'indeterminate'"

使用方括号进行绑定。当您直接分配字符串时，您必须使用 " 和 '

将此行添加到您的 index.html header

Answer 2

您需要确保您使用的是@angular/material 的主题。

来自getting started guide：

Include the core and theme styles:

This is required to apply all of the core and theme styles to your application. You can either use a pre-built theme, or define your own custom theme.

See the theming guide for instructions.

我发现在没有的情况下使用@angular/material 主题仅在某些时候有效。文本输入有效，但单选按钮、复选框 - 看起来是微调器 - 需要主题才能正常工作。

如引用中所述，您可以使用提供的主题之一（目前提供 6 个）或创建您自己的主题。使用 @import('~@angular/material/core/theming/prebuilt/<theme>.css').
可以将提供的主题包含在您的 css 中

Answer 3

在我的例子中，我有一个 font-awesome 微调器，它正在工作但不可见，因为 FontAwesome css 文件尚未完全加载。解决方案是使用 npm angular2-fontawesome 而不是 link index.html.

中的 css 文件

Answer 4

对我来说修复这个属性很有帮助

/deep/ .mat-progress-spinner circle, /deep/ .mat-spinner circle {
    stroke: white;
}

其中 white 是微调器的可见颜色

Answer 5

在我的类似情况下，微调器没有显示也没有在屏幕上抛出错误，即使标签被解析，我尝试拼写错误标签并且 angular 抛出标签不是预期的...

修复是为了确保在应用程序中导入 MatProgressSpinnerModule。一旦导入的微调器完美显示。

我在猜测为什么在进度微调器模块仍未导入时解析标签，我想该标签已在另一个更通用的导入模块中注册，但不确定是哪个。

Answer 6

在我的例子中，我安装了 material 和 npm install --save @angular/material

但是我不见了 ng add @angular/material

Angular2 Material2 <md-spinner> 未显示但正在运行

Angular2 Material2 <md-spinner> not showing but is working

angular

angular-material2