импортировать {OverlayContainer} из '@ angular / cdk / overlay'; не '@ angular / material'

тоящее время я использую Angular Material2 в приложении Angular 2.4.0 (использую@angular/material: 2.0.0-beta.1). По какой-то причине раскрывающийся список md-select вместо появления над начальным значением, заполнителем или стрелкой выбирает раскрывающийся список, как показано вПримеры из материалов документов, отображается полностью внизу страницы. До такой степени, что если раскрывающийся список md-select находится в верхнем правом углу страницы (компонент, в который я пытаюсь поместить мой, находится в верхнем правом углу страницы), при нажатии на стрелку для просмотра параметров раскрывающегося списка он будет прокручиваться. Вы в нижней части страницы, где они будут отображаться. Они также будут полной шириной страницы, а не шириной раскрывающегося списка.

Вот мой компонент (по крайней мере, соответствующие биты - это приложение довольно большое + я закомментировал или удалил столько кода, не связанного с выпадающим списком) (и удалил все в представлении, кроме раскрывающегося списка, чтобы сузить проблему для себя как ну и чтобы каждому читающему было легче увидеть проблему))

import { Component, EventEmitter, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  styleUrls: ['my-component.component.css'],
  providers: [FormBuilder]
})

export class MyComponent implements OnInit {
  @Input() page: Page;
  canvasBackgroundColors: string[] = ['White', 'Pink', 'Black'];
  draftModule: FormGroup;

  // --- Component Constructor ---

  constructor(private formBuilder: FormBuilder){}

  // --- Angular LifeCycle Hooks ---

  ngOnInit() {
    this.formBuilderInit();
  }

  // --- UI Delegates ---
  public onSave() {
   debugger;
  }

  // --- Private Helpers ---

  private formBuilderInit() {
    this.draftModule = this.formBuilder.group({
      canvasBackgroundColor: this.page.canvasBackgroundColor,
    });

    this.draftModule.valueChanges.subscribe(draftMod => {
      console.log('Test Module', draftMod);
    })
  }
}

СвязанныйNgModule имеетMaterialModule импортируется соответственно. Вот весь вид (хамл):

%form{'[formGroup]' => 'draftModule', '(ngSubmit)' => 'onSave()'}

  %md-select{'formControlName' => 'canvasBackgroundColor'}
    %md-option{'*ngFor' => 'let color of canvasBackgroundColors', :value => '{{color}}'}
      {{color}}

  %button{:type => 'submit'}
    Save

В настоящее время весь CSS для всего приложения закомментирован, так что я знаю, что это не что-то там, что влияет на выпадающий список. Раскрывающийся список работает отлично и корректно обновляется с помощью построителя форм. Просто, когда вы нажимаете на ошибку раскрывающегося списка, параметры внезапно появляются внизу страницы и становятся такими же широкими, как страница. Как только вы выбираете опцию, вы прокручиваетесь обратно туда, где находится ваш выпадающий список. Я искал везде и не могу найти кого-то еще с этой проблемой или ее решением. Самый близкий, который я приехал, был одним человеком, упоминающим в этомвопрос GitHub что у них была эта проблема, но они исправили ее, добавив тематику. Я попробовал это, и добавление темы не имело значения в том, как работал выпадающий список.

Для дальнейшего пояснения, когда я проверял раскрывающиеся опции, которые появляются в нижней части страницы, я заметил, что они появляются не только вне шаблона компонента, которыйmd-select находится внутри, но за пределами углового приложения целиком. HTML-код, показанный в инспекторе, выглядит примерно так, как показано в следующем коде (упрощенно, конечно, чтобы удалить все компоненты, не относящиеся к этой проблеме). Замечания:my-app является селектором для компонента приложения иcdk-overlay-container включает в себяmd-select-panel а такжеmd-select-content и варианты выпадающего списка):

 <html>
   <head></head>
   <body id="body" class>
     <my-app>
       <my-component>
         <md-select></md-select>
       </my-component>
     </my-app>
     <div class="cdk-overlay-container"></div>
   </body>
</html>

Любой совет будет принят во внимание!

Ответы на вопрос(3)

Ваш ответ на вопрос