【问题标题】: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

包括核心和主题样式:

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

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

如引用中所述,您可以使用提供的主题之一(目​​前提供 6 个)或创建自己的主题。提供的主题可以使用 @import('~@angular/material/core/theming/prebuilt/&lt;theme&gt;.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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2023-03-14
            • 2017-03-12
            • 2017-05-25
            • 1970-01-01
            • 2017-08-13
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多