md-bölücü (mat bölücü) açısal malzemede gösterilmiyor2

Question

, <hr> gibi kullanıyorum. <hr> gibi kullanmanın iyi olduğunu düşündüm. Ancak, bazen <md-divider> bazen gösterilmiyor.

<md-card>'da <md-divider> kullanıyorum, ancak <md-divider> gösterilmiyor. <md-list>'da yalnızca <md-divider> kullanmalı mıyım?

Birisi benimle aynı sorunu yaşıyorsa, bu sorunu çözmek için lütfen deneyiminizi paylaşın.

İşte kodum.

<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

Bu css stilini deneyin.

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

Answer 2

Güncelleme Şub 18

MatDivider module kendi taşındı:

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

---

Eski Cevap

<md-divider>MdListModule parçasıdır. Kullanmak isterseniz, bileşeninizin modülünde MdListModule ürününü içe aktarmanız ve şablonunuzda en az <md-list></md-list> ürününe sahip olmanız gerekir. Listeleri kullanmıyorsanız, bölücü için tüm modülü içe aktarma muhtemelen fazladır.

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

github birisi `flex` kısmını silerek,` md-divider` hareketli önerdi çalıştı ben, aynı sorunu yaşıyorum Material List Directives

Answer 3

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

imports: [ 
    MdListModule 
], 

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