Angular2 Material2 <md-spinner> 未显示但正在工作答案

【问题标题】：Angular2 Material2 <md-spinner> not showing but is workingAngular2 Material2 <md-spinner> 未显示但正在工作
【发布时间】：2017-01-11 03:19:10
【问题描述】：

我的假设是我的 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>

【问题讨论】：

您是否将@angular/material 主题之一链接到您的项目中？我发现有些控件可以正常工作，但如果没有它，其他控件就完全崩溃了。

标签： angular angular-material2

【解决方案1】：

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

来自getting started guide：

包括核心和主题样式：

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

有关说明，请参阅theming guide。

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

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

【讨论】：

【解决方案2】：

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

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

white 是微调器的可见颜色

【讨论】：

【解决方案3】：

变化：

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

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

将此行添加到您的 index.html 标头

【讨论】：

方括号用于绑定，但如果您绑定的是字符串文字，则无关紧要。 [color]="'warn'" 等同于 color="warn"
在我对其进行测试时有所作为...而且效果很好...你做到了吗？
如果您使用 cli @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'; 还可以通过在 styles.css 中添加一行来引入默认样式；
到第一个；不，没有区别。不带括号或带括号对我有用。见here。此外，作为第二个迂腐的问题；那是一个主题，不是默认样式。根据定义，在没有提供任何其他内容时使用默认值。 @angular/material 不提供默认主题，因此必须手动链接。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

就我而言，我使用npm install --save @angular/material 安装了材料

但我不见了 ng add @angular/material

【讨论】：