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

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

来自getting started guide：

  

包含核心和主题样式：

     

这需要将所有核心和主题样式应用于您的   应用。您可以使用预先构建的主题，也可以定义自己的主题   自定义主题。

     

  
• 有关说明，请参阅theming guide。
  

我发现在没有主题的情况下使用@ angular / material 只能在某些时候使用。文本输入工作但是radiobuttons，复选框 - 并且它似乎是微调器 - 需要主题才能正常工作。

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

Answer 2

变化：

[颜色] = “ '警告'” [模式] = “ '不确定'”

使用方括号进行绑定。 在直接分配字符串时，必须使用“和”

将此行添加到index.html标题

＆lt; link href =“https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css"rel =”stylesheet“＆gt;

Answer 3

在我的情况下，我有一个字体很棒的微调器，它工作但不可见，因为FontAwesome css文件还没有完全加载。解决方案是使用npm angular2-fontawesome而不是链接index.html中的css文件。

Answer 4

对我来说，修复此属性有帮助

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

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

Answer 5

在类似的情况下，微调框没有显示，也没有在屏幕上抛出错误，即使标记已解析，我也尝试了拼写错误的标记和角度抛出的标记...

解决方法是确保在应用程序中导入了MatProgressSpinnerModule。 导入的微调框显示完美后。

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