md-divider(mat-divider)未显示在角度材质2中

Question

我<md-divider>喜欢用<hr>.我觉得使用喜欢没关系<hr>.但是,<md-divider>有时候没有显示出来.

我用<md-divider>的<md-card>,但<md-divider>没有显示.如果我只用<md-divider>在<md-list>？

如果有人对我有同样的问题,请分享您的经验以解决此问题.

这是我的代码.

<div class="card-height" fxLayoutAlign="center center">
  <md-card fxFlex="30" fxLayout="column">
    <md-card-title>Sign in</md-card-title>
    <form [formGroup]="myForm" (ngSubmit)="onSignin()">
      <md-card-content>
        <div class="form-group">
          <md-input-container>
            <input mdInput placeholder="E-mail" formControlName="email">
            <md-hint>
              <span class="invalid" [hidden]="myForm.controls['email'].pristine || !myForm.controls['email'].errors?.required">Required</span>
              <span class="invalid" [hidden]="myForm.controls['email'].errors?.required || !myForm.controls['email'].errors?.email">This doesn't appear to be a valid email address.</span>
              <span class="invalid" [hidden]="!myForm.controls['email'].errors?.pattern">Email address is not correct.</span>
            </md-hint>
          </md-input-container>
        </div>
        <div class="form-group">
          <md-input-container>
            <input mdInput placeholder="Password" formControlName="password" type="password" fxLayoutAlign="center">
            <md-hint>
              <span class="invalid" [hidden]="myForm.controls['password'].pristine || !myForm.controls['password'].errors?.required">Required</span>
            </md-hint>
          </md-input-container>
        </div>
      </md-card-content>
      <md-card-actions>
        <a [routerLink]="['/forget-password']">Do you forget your password?</a>
        <button md-button color="accent" type="submit">Login</button>
      </md-card-actions>
    </form>

  </md-card>
</div>

Answer 1

2月18日更新

MatDivider被移动到自己的模块:

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

过时的答案

该<md-divider>是部分MdListModule.如果要使用它,则需要导入MdListModule组件的模块,并至少<md-list></md-list>在模板中的某个位置.如果您没有使用列表,则导入分隔符的整个模块可能有点过分.只需重复<hr>使用自己的风格,例如:

hr {
  display: block;
  margin: 10px 0 10px 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
  width: 100%
}

请参阅材料清单指令

Answer 2

这对我有帮助。

mat-divider {
    width: 100%;
}

一些细节：
这是一个带有以下 HTML 代码的 Angular 组件：

<div class="container">
    <!---some header text-->

    <div class="content">
    <!---some crappy content-->
    </div>

    <mat-divider></mat-divider>   

    <div class = "actions">
        <!--couple of buttons-->
    </div>    
</div>

这是一个 CSS 文件：

.container {
    display: flex;
    flex-direction: column;
    margin: 0 15px;
    align-items: flex-start;
}

.content {
    margin: 0 15px;
}

mat-divider {
    width: 100%;
}

.actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0px 15px;
}

Answer 3

更新：尝试使用 mat-divider 而不是 md-divider

试试这个CSS样式。

md-divider {
    border-width: 1px;
    border-style: solid;
}