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

我是Node的新手,正在尝试使用 dropdown from Angular Material 。问题是,一旦打开下拉列表,它就无法关闭(通过单击页面的另一个区域),第二个问题是下拉列表不适合放置在其中的引导网格中。下面是打开的下拉列表的图像

以下是我的 package.json 文件夹(显然还有其他依赖项)。

"@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'];

有人能看出我做错了什么吗?