Mat-Select 不采用 .mat-form-field-infix 的默认父宽度 180 像素（边缘浏览器）答案

【问题标题】：Mat-Select does not take default parent width of 180px of .mat-form-field-infix (Edge Browser)Mat-Select 不采用 .mat-form-field-infix 的默认父宽度 180 像素（边缘浏览器）
【发布时间】：2019-12-20 21:43:53
【问题描述】：

Mat-Select 应该是 180px，这是 mat-infix 容器的宽度

问题

如果未设置表单域的宽度，则选择范围为 100%

这个表单域没有明确的宽度设置，但是选择元素不包含在包含它的 mat-form-field-infix 的 180px 内。它在除 Edge 之外的所有浏览器上都能正常工作（Windows 10 中的最新版本）

正常行为 Chrome

异常行为边缘

还有 GitHub 上的未解决问题，我需要一些解决方法，直到他们修复

【问题讨论】：

你能创建一个 stackblitz 示例吗？
@StepUp 在 chrome 和 edge 中检查此链接 material.angular.io/components/select/overview
这听起来像是错误报告，而不是问题。你为什么在这里发这个？
@G.Tranter 每个错误都有一个解决方案，我在这里发布它，以便如果有人知道解决方案。就我而言，我需要任何解决方案。我只需要一个解决方法，直到他们解决这个问题
正确 - 但您的帖子不要求解决方案/解决方法 - 它看起来就像是从 GitHub 问题复制和粘贴的报告。

标签： css angular angular-material cross-browser microsoft-edge

【解决方案1】：

我自己想通了，只需将材料 mat-select 包裹在一些 div 中，然后给它 width 等于 input。

这样

<div class="select-cover">
              <mat-form-field appearance="outline">
                <mat-label>Records Per Page</mat-label>
                <mat-select [(ngModel)]="selectedPageSizePerformers" (ngModelChange)="selectChange()">
                  <mat-option [value]="10">10</mat-option>
                  <mat-option [value]="25">25</mat-option>
                  <mat-option [value]="50">50</mat-option>
                </mat-select>
              </mat-form-field>
            </div>

并设置样式

.select-cover{
  width: 198px;
}

【讨论】：

【解决方案2】：

这似乎是Angular Material bug，您可以将有关此问题的反馈发布到 Angular Material。

作为一种解决方法，您可以尝试使用 html 元素，并使用 matNativeControl 属性和与 mat 相关的 CSS 样式。

像这样：

<select class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" id="mat-input-0" aria-invalid="false" aria-required="true" required="" _ngcontent-evs-c20="" matnativecontrol="">
      <option value="volvo" _ngcontent-evs-c20="">Volvo</option>
      <option value="saab" _ngcontent-evs-c20="">Saab</option>
      <option value="mercedes" _ngcontent-evs-c20="">Mercedes</option>
      <option value="audi" _ngcontent-evs-c20="">Audi</option>
</select>

【讨论】：

我只能使用垫选择的 Angular 材质组件。无论如何感谢您的时间。我会在 GitHub 上发布反馈