我目前正在 Angular 2.4.0 应用程序中使用 Angular Material2（使用@angular/material: 2.0.0-beta.1）。由于某种原因，md-select 下拉列表没有出现在初始值或占位符或箭头上来选择下拉列表，如这些中所示examples来自材料文档，一直出现在页面底部。以至于如果 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适当进口。
这是整个视图（haml）：
%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位于 Angular 应用程序之内，但完全位于其之外。检查器中显示的 html 看起来类似于以下代码（当然进行了简化，以删除与此问题无关的所有组件）。笔记：my-app是应用程序组件的选择器，cdk-overlay-container包括md-select-panel and 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>
任何意见，将不胜感激！
