web-dev-qa-db-fra.com

md-divider (mat-divider) n'apparaît pas dans un matériau angulaire2

J'utilise <md-divider>, comme <hr>. Je pensais qu'il était acceptable d'utiliser comme <hr>. Cependant, <md-divider> ne s'affiche parfois pas.

J'ai utilisé <md-divider> dans <md-card>, mais <md-divider> n'est pas affiché . Devrais-je utiliser uniquement <md-divider> dans <md-list>?

Si quelqu'un a le même problème avec moi, partagez votre expérience pour résoudre ce problème.

Voici mon 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>
angularangular-material
7
Mingyu Jeon

Mise à jour du 18 février

MatDivider a été déplacé dans son propre module :

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

Réponse périmée

Le <md-divider> fait partie de la MdListModule. Si vous voulez l'utiliser, vous devez importer la MdListModule dans le module de votre composant et avoir au moins <md-list></md-list> quelque part dans votre modèle. Si vous n'utilisez pas de listes, l'importation de l'ensemble du module pour le diviseur est probablement excessive. Il suffit de réutiliser <hr> avec vos propres styles tels que:

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

voir Directives concernant la liste de matériel

5
Kim Kern

MIS &AGRAVE; JOUR: essayez mat-divider au lieu de md-divider

Essayez ce style css.

md-divider {
    border-width: 1px;
    border-style: solid;
}
2
gtzinos
import { MdListModule } from '@angular/material';

imports: [
    MdListModule
],

<md-list><md-divider></md-divider></md-list>
0
Victor ifeanyi