Angular Material md-select 下拉定位答案

【问题标题】：Angular Material md-select Dropdown PositioningAngular Material md-select 下拉定位
【发布时间】：2017-08-30 22:36:33
【问题描述】：

目前在 Angular 4.1.3、angular-cli 1.1.1、angular material 2.0.0 中构建应用程序

正常的 md-select 覆盖行为似乎会向上或向下移动覆盖的位置，以便当前选择位于相应输入字段的顶部，您可以在演示中看到该功能：https://material.angular.io/components/select/examples

对于长度为 3 项的列表，这似乎是可靠的 UI，但使用包含 20 多个项目的列表会导致列表急剧变化（选择列表底部的选项会导致整个列表移动直到覆盖上面的其他输入字段。

我正在尝试找到一种方法使选择下拉叠加层保持静止（始终位于输入字段本身下方）。我曾尝试在 MdSelect 类的原型上编辑 _calculateOverlayPosition 方法，但没有取得多大成功。有没有人遇到过这个问题？模板和相关的控制器都是千篇一律的。

模板：

<md-select (change)="currencySelected()" formControlName="currency"
  <md-option *ngFor="let currency of currencies 
  [value]="currency.label">
  {{ currency.label }} - {{ currency.description }}
  </md-option>
</md-select>

【问题讨论】：

这里是底部位置：imgur.com/a/hRd16

标签： angular angular-material2

【解决方案1】：

在一位同事的帮助下，我设法通过一个自定义实用程序扩展/编辑了calculateOverlayPosition 方法，该方法可以在MdOptionSelectionChange 执行时随时使用。

_mdSelect.prototype._calculateOverlayPosition = function() {
  const items = this._getItemCount();
  const panelHeight = Math.min(items * SELECT_ITEM_HEIGHT, 
  SELECT_PANEL_MAX_HEIGHT);
  const scrollContainerHeight = items * SELECT_ITEM_HEIGHT;

  // The farthest the panel can be scrolled before it hits the bottom
  const maxScroll = scrollContainerHeight - panelHeight;

  let groupLabels = countGroupLabelsBeforeOption(0, this.options, 
  this.optionGroups);

  this._offsetY = (SELECT_ITEM_HEIGHT - SELECT_TRIGGER_HEIGHT) / 2 * -1 - (groupLabels * SELECT_ITEM_HEIGHT);

  // Add 40 pixels to the y-axis to align dropdown below the input field
  this._offsetY = this._offsetY + 40;

  this._checkOverlayWithinViewport(maxScroll);
}

【讨论】：