角材2にmdディバイダ（マットデバイダ）が表示されていません

Question

<hr>のように<md-divider>を使用しています。 <hr>のように使っても問題ないと思いました。 ただし、<md-divider>が表示されないことがあります。

<md-card>では<md-divider>を使用しましたが、<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

このCSSスタイルをお試しください。

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

Answer 2

更新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% 
} 

、githubの上で誰かが `MD-divider`を動かす提案し、私は同じ問題を抱えているMaterial List Directives

Answer 3

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

imports: [ 
    MdListModule 
], 

<md-list><md-divider></md-divider></md-list>