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

Question

我正在使用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>

结果是这样的：

日期选择器工作正常，但时间选择器的切换按钮未按应有的方式对齐。我遵循了官方文档

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

Answer 1

我也有同样的问题，但你所要做的就是添加MatSuffix到ngx-material-timepicker-toggle，它会正确对齐按钮。

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

Answer 2

尝试包装input并toggle-button进入div并设置display: flex为那个div。像这样的东西：

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

css：

div { display:flex }