角度材料md-选择下拉定位

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项的列表来说，这看起来像是实体用户界面，但使用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>

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