Angular Material DatePicker 在日期字段下方显示日历

Question

我正在尝试在对话框中完全按照文档中的描述实现基本日期选择器，但它没有正确显示日历图标。它是这样的：

以下是该对话框的 html 模板代码：

<div class="dialog-header">
  <button mat-icon-button tabindex="-1" (click)="cancel()">
    <mat-icon>close</mat-icon>
  </button>
</div>
<div mat-dialog-content>
  <mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker" />
    <mat-hint>MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</div>

这是CSS代码：

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dialog-header {
  display: flex;
  flex-direction: row;
  margin: -10px -10px 10px;

  & > h1 {
      margin: auto 0;
  }

  & > .mat-icon-button {
      margin-left: auto;
      margin-bottom: auto;
  }
}

.mat-dialog-content {
  width: 100%;
  display: flex;
  max-height: unset;
}

我已经尝试删除所有容器组件的几乎所有 CSS，但这并不重要，日期选择器始终以这种损坏的布局显示。我也没有全局样式或任何其他可能导致这种情况的东西，所以我对这里发生的事情完全一无所知。

Answer 1

我刚刚注意到我正在查看错误的文档（15.1.0-next.0）。在该版本中，matIconSuffix使用了而不是像matSuffix以前的版本那样。在我的代码中更改为后matIconSuffix，matSuffix问题消失了。

Answer 2

您可以通过将指令更改为 上的matSuffix指令来定义图标的位置，而无需在 .css 文件中添加任何样式。matPrefixmat-datepicker-toggle

请参阅我从此处的文档中分叉的示例。

在您的代码中，您似乎正在使用matIconSuffix，我在当前版本中没有找到angular-material- 如果这不是一种类型，并且它是旧版本中使用的类型，也许您可​​能必须将其更改为matIconPrefix.