Angular 2 mat-select 的 mat-select 框宽度是否可能与 mat-select-panel 不同？

Question

我遇到了“下拉”菜单宽度的材料垫选择初始选择框与垫选择面板中的选项大小相同的问题。我以前有一个简单的 jQuery 选择框，占位符有一个宽度，选择/选项有一个单独的宽度。它似乎是自动完成的。我现在在使用 Angular 6 材料选择不同宽度时遇到问题。我花了很长时间才弄清楚如何首先改变宽度。我终于改用了

角度 HTML：

<div id="selectionList">
  <mat-form-field>
    <mat select [ngclass]="{'selection-box-width' : true }" placeholder="Select an Option">
      <mat-option *ngFor="let selection of selectionList">
    Your {{selection.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

和SCSS的

.selection-box-width {
    min-width: 512px;
    max-width: none;
}

选择框 (mat-select) 始终与弹出窗口较高的 z-index (mat-select-panel) 具有相同的宽度。是否有办法改变宽度并使它们不同？

Answer 1

关于谁回答了这个问题，我退后一步。是你们两个，让我更好地理解这个概念。我发现我需要一点 CSS。我的代码如下：

<div id="selectionList">
  <mat-form-field>
    <mat select panelClass="panel-selection-width" placeholder="Select an Option">
      <mat-option *ngFor="let selection of selectionList">
        Your {{selection.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

并且，在 styles.scss 中，SCSS 为：

.panel-selection-width {
  max-width: none !important;
}

!important 绝对需要，但 [ngclass]="{'selection-box-width' : true }" 不是必需的。我在组件的 SCSS 中确实需要这个：

#selectionList > .mat-form-field {
    min-width:250px;
}

但现在可以了！

谢谢

Answer 2

您需要同时设置样式。面板的样式需要通过panelClass 选项应用。使用ngClass 会将样式应用于选择输入，而不是面板。

<mat-select 
    [ngclass]="{'selection-box-width' : true }" 
    panelClass="selection-panel-width" 
    ...

对于面板，您可能必须将!important 与最大宽度设置一起使用，可能还有其他设置，并且该类需要是全局类，而不是您的组件的一部分。