Angular Material md-select 下拉定位

Question

目前正在 Angular 4.1.3、angular-cli 1.1.1、angular material 2.0.0

中构建应用程序

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

对于长度为 3 项的列表，这似乎是可靠的 UI，但是使用超过 20 项的列表会导致列表发生巨大变化（select在列表底部会导致整个列表向上移动到覆盖上面其他输入字段的位置。

我正在尝试找到一种方法使 select 下拉叠加层保持静止（始终在输入字段本身下方）。我曾尝试在 MdSelect class 的原型上编辑 _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);
}

Angular Material md-select 下拉定位

Angular Material md-select Dropdown Positioning

angular-material2

angular