Angular2材料选择下拉列表在打开后不会关闭

Question

我是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'];

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

Answer 1

在主css / sass文件中包含一个材质主题：

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

或将其添加到index.html head代码

中