NCo*_*ley 4 haml material-design angular-material2 md-select angular
我目前在Angular 2.4.0应用程序中使用Angular Material2(使用@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导入是适当的.这是整个视图(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外部,而且完全出现在角度应用程序之外.检查器中显示的html看起来类似于以下代码(当然简化为删除与此问题无关的所有组件).注意:my-app是app组件的选择器,cdk-overlay-container包括md-select-paneland 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>
任何意见,将不胜感激!
小智 9
我有同样的问题.我通过导入材质主题解决了它:
@import '~@angular/material/core/theming/prebuilt/[one-of-the-themes].css';在我的主要样式集中.
| 归档时间： |
|
| 查看次数： |
4136 次 |
| 最近记录： |