Angular 7.ngx-material-timepicker，切换按钮未正确对齐答案

【问题标题】：Angular 7. ngx-material-timepicker, toggle button not properly alignedAngular 7.ngx-material-timepicker，切换按钮未正确对齐
【发布时间】：2019-12-09 05:40:09
【问题描述】：

我正在使用ngx-material-timepicker 创建日期和时间选择器。

这是我的模板的相关部分。（我没有多余的 CSS 组件）

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <mat-form-field>
        <input
          matInput
          [matDatepicker]="picker"
          placeholder="Choose a date"
          [min]="minDate"
          [(ngModel)]="chosenDate"
          (ngModelChange)="dateChanged()"
        />
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="col-sm-6">
      <mat-form-field>
        <input
          matInput
          [ngxTimepicker]="timePick"
          placeholder="Chose time"
          [min]="minTime"
          [(ngModel)]="chosenTime"
          (ngModelChange)="timeChanged()"
        />
        <ngx-material-timepicker-toggle
          [for]="timePick"
        ></ngx-material-timepicker-toggle>
        <ngx-material-timepicker
          [defaultTime]="minTime"
          #timePick
        ></ngx-material-timepicker>
      </mat-form-field>
    </div>
  </div>
</div>

结果是这样的：

日期选择器工作正常，但时间选择器的切换按钮未按应有的方式对齐。我关注了official documentation

如何像日历一样对齐时钟？

【问题讨论】：

标签： angular angular-material timepicker

【解决方案1】：

我也遇到了同样的问题，但您只需将MatSuffix 添加到ngx-material-timepicker-toggle 即可正确对齐按钮。


<ngx-material-timepicker-toggle matSuffix [for]="timePick" ></ngx-material-timepicker-toggle>

【讨论】：

这应该是公认的答案。节省了我很多时间。
@Brent 和 matSuffix 如何减小 Material Datepicker 等图标的大小

【解决方案2】：

尝试将input 和toggle-button 包装在div 中，并将display: flex 设置为div。像这样的：

<div>
  <input>
  <ngx-material-timepicker-toggle></ngx-material-timepicker-toggle>
</div>

CSS：

div { display:flex }

【讨论】：

【解决方案3】：

我可以看到你正在使用<input matInput [matDatepicker]="picker" />

为了解决这个问题，正如 Виталик Бойко 建议的那样，将两者都包装在一个 div 中并应用 div { display:flex }

另外，使用改变时间选择器的高度

CSS

::ng-deep .ngx-timepicker { height: 72% !important; }

【讨论】：