Rozdzielacz md (dzielnik mat) nie jest wyświetlany w materiałach kątowych2

Question

Używam <md-divider>, jak <hr>. Myślałem, że to jest w porządku przy użyciu jak <hr>. Jednak czasami nie wyświetla się <md-divider>.

Użyłem <md-divider> w <md-card>, ale <md-divider> nie jest wyświetlany. Czy powinienem używać tylko <md-divider> w <md-list>?

Jeśli ktoś ma ten sam problem ze mną, podziel się swoim doświadczeniem, aby rozwiązać ten problem.

Oto mój kod.

<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

Spróbuj tego stylu css.

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

Answer 2

Aktualizacja Lut 18

MatDivider została przeniesiona do własnej module:

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

---

archiwalna Odpowiedź

<md-divider> jest częścią MdListModule. Jeśli chcesz go użyć, musisz zaimportować MdListModule w module modułu i mieć co najmniej <md-list></md-list> gdzieś w swoim szablonie. Jeśli nie używasz list, import całego modułu do dzielnika jest prawdopodobnie przesadą. Wystarczy ponowne <hr> z własnych stylów, takich jak:

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

zobaczyć Material List Directives

Answer 3

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

imports: [ 
    MdListModule 
], 

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