角度材料日期选择器添加水平线

Question

当我从 Angular Material 网站复制 DatePicker 示例时，它会在底部添加一条额外的水平线，但我不知道为什么。

这是示例：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

这是一个屏幕截图：

Answer 1

这个问题是因为您使用的是angular material以及materialize或materialize样式的cdn。 你可以删除这一行：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

并且日期选择器的行就可以了，然后，您可以使用其他网格系统进行行和列。 例如： https : //github.com/angular/flex-layout

Answer 2

我只是把这个留在这里，以防其他人犯和我一样的错误。 就我而言，我不小心将日期选择器代码复制并粘贴到现有mat-form-field 。 由于所有的标记，我一开始没有注意到它。

我是这样的，去掉外面的mat-form-field为我修复了它：

        <mat-form-field>
          <mat-form-field>
            <mat-label>End Date</mat-label>
            <input matInput [(ngModel)]="endDate" #endDate="ngModel" [matDatepicker]="picker1">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </mat-form-field>