md-divider(mat-divider)未显示在角度材料2中 [英] md-divider (mat-divider) is not showing in angular material2

问题描述

我使用 ，就像

---

.我认为使用 <hr> 就可以了.但是， 有时不显示.

我在 中使用了 ，但是 不是显示.我应该只在 中使用 吗?

如果有人和我有同样的问题，请分享您解决此问题的经验.

这是我的代码.

<md-card fxFlex="30" fxLayout="column"><md-card-title>登录</md-card-title><form [formGroup]="myForm" (ngSubmit)="onSignin()"><md-card-content><div class="form-group"><md-输入-容器><input mdInput placeholder="E-mail" formControlName="email"><md-提示><span class="invalid" [hidden]="myForm.controls['email'].pristine || !myForm.controls['email'].errors?.required">必需</span><span class="invalid" [hidden]="myForm.controls['email'].errors?.required || !myForm.controls['email'].errors?.email">这个没有出现成为有效的电子邮件地址.</span><span class="invalid" [hidden]="!myForm.controls['email'].errors?.pattern">电子邮件地址不正确.</span></md-提示></md-input-container>
<div class="form-group"><md-输入-容器><input mdInput placeholder="密码" formControlName="password" type="password" fxLayoutAlign="center"><md-提示><span class="invalid" [hidden]="myForm.controls['password'].pristine || !myForm.controls['password'].errors?.required">必需</span></md-提示></md-input-container>

</md-card-content><md-card-actions><a [routerLink]="['/forget-password']">您忘记密码了吗?</a><button md-button color="accent" type="submit">登录</button></md-card-actions></表单></md-card>

解决方案

2 月 18 日更新

MatDivider 已移至其自己的模块:

从'@angular/material/divider'导入{MatDividerModule}；

<小时>

过时的答案

是 MdListModule 的一部分.如果你想使用它，你需要在你的组件的模块中导入 MdListModule 并且至少有 你的模板.如果您不使用列表，则为分隔符导入整个模块可能有点过分.只需使用您自己的样式重复使用 <hr>，例如:

hr {显示:块；边距:10px 0 10px 0；边框顶部:1px 实心 rgba(0, 0, 0, .12);宽度:100%}

请参阅材料清单指令

I use <md-divider>, like <hr>. I thought it's ok with using like <hr>. However, <md-divider> is sometimes not showing.

I used <md-divider> in the <md-card>, but <md-divider> is not shown. Should I only use <md-divider> in <md-list>?

If someone has the same issue with me, please share your experience to solve this issue.

Here's my code.

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

解决方案

Update Feb 18

The MatDivider was moved to its own module:

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

---

Outdated Answer

The <md-divider> is part of the MdListModule. If you want to use it, you need to import the MdListModule in your component's module and have at least <md-list></md-list> somewhere in your template. If you're not using lists, importing the whole module for the divider is probably overkill. Just reuse <hr> with your own styles like:

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

see Material List Directives

这篇关于md-divider(mat-divider)未显示在角度材料2中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！