Question

我目前在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 issue中提到他们有这个问题，但是他们通过添加主题来修复它。我试过这个并且添加主题并没有对下拉列表的工作方式产生影响。

为了进一步说明，当我检查页面底部显示的下拉选项时，我注意到它们不仅出现在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>

任何建议都将不胜感激！

Answer 1

我遇到了同样的问题。我通过导入材料主题来解决它：

@import '~@angular/material/core/theming/prebuilt/[one-of-the-themes].css';

在我的主要样式集中。

Answer 2

如果要在角度cli项目中安装角度材质，那么主题将在node_modules / @ angular / material / prebuilt-themes /

中

因此导入链接将如下所示

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css"

我们应该将上面的行添加到angular-cli应用程序的styles.css文件中。在这里，deeppurple-amber.css是我们提供的预制主题角度材料之一。如果导入操作不正确，大多数内置组件（如md-select）都无法按预期工作。

快乐编码：）

Answer 3

我遇到了同样的问题但是使用了datepicker控件。它没有弹出文本框下方，而是出现在页面底部。

我尝试了另一个推荐的答案并将一个主题导入styles.css文件：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

这对我来说并不适合，但这是朝着正确方向迈出的一步。

但我还需要对app.module.ts文件进行一些更改：

将此添加到导入：

import {OverlayContainer} from '@angular/material';

并更改app模块类声明：

export class AppModule {
constructor(overlayContainer: OverlayContainer) {
    overlayContainer.themeClass = 'unicorn-dark-theme';
}

您可以在此处找到更多相关信息：

https://material.angular.io/guide/theming

完成所有操作后，日期选择器开始为我工作，而不是在点击时弹出页面底部。

Angular Material2 md-select下拉列表显示在页面底部

3 个答案: