在angular material2中没有显示md-divider (mat-divider)

Question

我像<hr>一样使用<md-divider>。我认为像<hr>这样使用也没问题。但是，<md-divider>有时不显示。

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

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

Answer 2

这对我很有帮助。

mat-divider {
    width: 100%;
}

以下是一些详细信息：

它是一个具有以下HTML代码的Angular组件：

<div class="container">
    <!---some header text-->

    <div class="content">
    <!---some crappy content-->
    </div>

    <mat-divider></mat-divider>   

    <div class = "actions">
        <!--couple of buttons-->
    </div>    
</div>

下面是一个CSS文件：

.container {
    display: flex;
    flex-direction: column;
    margin: 0 15px;
    align-items: flex-start;
}

.content {
    margin: 0 15px;
}

mat-divider {
    width: 100%;
}

.actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0px 15px;
}

Answer 3

更新了：尝试使用mat-divider而不是md-divider

试试这个css样式。

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