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

我使用< 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>

2月18日更新

MatDivider被转移到自己的module：

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

过时的答案

< md-divider>是MdListModule的一部分.如果要使用它,则需要在组件模块中导入MdListModule,并且至少包含< md-list>< / md-list>在模板的某个地方.如果您没有使用列表,则导入分隔符的整个模块可能有点过分.只需重复使用< hr>你喜欢自己的风格：

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

见Material List Directives

原文地址：https://www.jb51.cc/angularjs/141063.html