Angular Material md-select 下拉定位

Question

目前正在使用 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 类的原型(prototype)上编辑 _calculateOverlayPosition 方法，但收效甚微。有人遇到过这个问题吗？模板和关联的 Controller 非常简单。

模板:

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

Answer 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);
}