2月18日更新

Question

我使用<md-divider>，例如<hr>。我认为使用像<hr>这样可以。但是，<md-divider>有时无法显示。

我在<md-divider>中使用了<md-card>，但未显示<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

2月18日更新

MatDivider已移至自己的module：

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

过时的答案

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

Answer 4

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

imports: [
    MdListModule
],

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

md-divider（mat-divider）未显示在角度材质2中

4 个答案:

2月18日更新

过时的答案