angular - md-divider (mat-divider) 未显示在 Angular Material 2 中

Question

我使用 <md-divider> , 比如 <hr> .我认为使用 like <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 被移动到它自己的 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, 0, 0, .12);
  width: 100%
}

参见 Material List Directives