我使用<md-divider>，如<hr>。我認爲可以使用像<hr>。但是，<md-divider>有時不顯示。md-divider（mat-divider）未顯示在角度材質2中

我在<md-card>中使用了<md-divider>，但未顯示<md-divider>。我應該只在<md-list>中使用<md-divider>嗎？

如果有人對我有同樣的問題，請分享您的經驗來解決此問題。

這裏是我的代碼。

<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>

來源

2017-02-27 Mingyu Jeon

我有同樣的問題，在github上有人建議移動'MD-divider'，試圖刪除'flex'部分只是爲了看看這是否是問題。似乎沒有什麼能解決這個問題。如果你有更好的運氣，發佈它。 – Spartacus9

試試這個css風格。

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

來源

2017-05-04 11:45:17 gtzinos

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

來源

2017-07-26 13:36:32

請注意，截至目前的版本，這不再是真實的：https://github.com/angular/material2/pull/5862 – Jules

@Jules感謝您的提示，我已經更新了答案。 –

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

imports: [ 
    MdListModule 
], 

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

來源

2017-09-24 17:25:19

md-divider（mat-divider）未顯示在角度材質2中

回答

更新2月18日

過時的回答

相關問題