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

发布时间：2020-12-17 17:59:03 所属栏目：安全来源：网络整理

导读：我目前在Angular 2.4.0应用程序中使用Angular Material2(使用@ angular / material：2.0.0-beta.1).出于某种原因,md-select下拉列表不是出现在初始值或占位符或箭头上以选择下拉列表,如材料文档中的这些 examples所示,一直显示在页面底部.至于如果md-select

我目前在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是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>

任何意见,将不胜感激！

解决方法

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

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

在我的主要样式集中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!