4

我目前在 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之外，而且完全出现在 Angular 应用程序之外。检查器中显示的 html 类似于以下代码（当然简化以删除与此问题无关的所有组件）。注意：my-app是应用程序组件的选择器，cdk-overlay-container包括md-select-panelandmd-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>

任何意见，将不胜感激！

4

3 回答 3

10

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

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

在我的主要样式中。

于 2017-02-07T16:26:08.843 回答
1

我有同样的问题，但使用日期选择器控件。它不是在文本框下方弹出，而是在页面底部。

我尝试了其他答案推荐的内容并将主题导入到 styles.css 文件中：

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

这本身对我不起作用，但这是朝着正确方向迈出的一步。

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

将此添加到导入中：

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

并更改应用模块类声明：

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

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

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

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

于 2017-07-27T21:51:08.423 回答
1

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

所以导入链接将如下所示

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

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

快乐编码:)

于 2017-06-05T07:25:47.517 回答