首页 文章

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

提问于
浏览 次
3

我目前在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都已被注释掉，所以我知道's not something in there affecting the dropdown. The dropdown works perfectly and updates properly with form builder, its just that when you click the dropdown error the options suddenly show up all the way at the bottom of the page and are as wide as the page. Once you select an option you get scrolled back up to where your dropdown box is. I have searched everywhere and can'似乎发现其他人有这个问题或修复它 . 我最接近的是一个人在这个_1055130中提到他们有这个问题，但他们通过添加主题来修复它 . 我试过这个并且添加主题并没有对下拉列表的工作方式产生影响 .

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

任何意见，将不胜感激！

angular material-design haml angular-material2 md-select

3 回答

  • 1

    我有同样的问题 . 我通过导入材质主题解决了它：

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

    在我的主要样式集中 .

    回复于
  • 8

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

    因此导入链接将如下所示

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

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

    快乐编码:)

    回复于
  • 1

    我有同样的问题，但使用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

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

    回复于

相关问题