импортировать {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>
Любой совет будет принят во внимание!