Angular2材质选择下拉菜单在打开后不会关闭答案

【问题标题】：Angular2 Material select dropdown does not close after it is openedAngular2材质选择下拉菜单在打开后不会关闭
【发布时间】：2018-04-21 21:52:48
【问题描述】：

我是 Node 新手，我正在尝试使用 dropdown from Angular Material。问题是一旦打开下拉菜单就无法关闭（通过单击页面的另一个区域），第二个问题是下拉列表不适合它所在的引导网格。下面是打开下拉菜单

这是我的 package.json 文件夹中的 Material 依赖行（显然还有其他依赖）。

"@angular/material": "^5.2.5",
"@angular/animations": "^5.2.10",
"@angular/cdk": "^5.2.5",
"hammerjs": "^2.0.8",

我在我的项目中使用子模块，所以在父模块中我包含了导入（还有其他导入，但这些是相关的）

imports: [
    MatSelectModule,
    ReactiveFormsModule
]

在子模块中我包含相同的导入。

在使用下拉列表的实际组件中，我有 html

<div class="row col-sm-5">
         <mat-form-field>
                <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
                        <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
                 </mat-select>
          </mat-form-field>
  </div>

相关的打字稿是

toppings = new FormControl();

toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

谁能看到我在这里做错了什么？

【问题讨论】：

你是否导入了材质主题？我也认为最好将row 和col 放入两个单独的元素中
@Hussein 不，我认为这是可选的，不过我会试一试
@Hussein 我在 index.hbs 文件中添加了<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">，但它似乎没有任何改变
通过签入开发工具确保应用其中的样式
只需右键单击页面中的任何角度材质组件并选择inspect 然后检查样式选项卡，如果您看到应用了一些样式，则 css 已正确导入

标签： angular typescript angular-material2

【解决方案1】：

在您的主 css/sass 文件中包含一个材料主题：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

或将其添加到您的 index.html head 标记中

【讨论】：