Angular5组件中MatSelect显示异常，选项呈文本段落并排求助

嘿，我之前在Angular5里用MatSelect的时候也踩过这个坑！下拉选项变成横向排版，基本都是样式、组件结构或者模块导入的问题，咱们一步步来排查解决：

1. 先确认全局样式是否正确导入 #

Angular Material的组件依赖它的主题样式才能正常渲染，要是没在全局样式文件里导入主题，组件布局直接就乱套了。

打开你的styles.css（或者styles.scss，看你项目用的哪种），添加这行代码：

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

如果用的是自定义主题，也要确保你正确导入了自己的主题文件，并且在Angular配置里正常引用。

2. 检查模板的HTML结构是否规范 #

MatSelect的下拉选项必须嵌套在<mat-select>标签内部，绝对不能直接放在<mat-form-field>里。正确的结构应该是这样的：

<mat-form-field>
  <mat-label>请选择选项</mat-label>
  <mat-select [(ngModel)]="selectedValue">
    <!-- 所有mat-option必须放在mat-select标签内部 -->
    <mat-option *ngFor="let item of optionsList" [value]="item.id">
      {{ item.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

要是你把<mat-option>直接放在<mat-form-field>下，它们就会像普通文本段落一样横向排列，这是最常见的错误！

3. 确保模块导入完整 #

在你使用MatSelect的组件所属的NgModule里，必须同时导入MatSelectModule和MatOptionModule（Angular5版本里这两个是分开的，后期版本才合并）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';
import { YourComponent } from './your.component';

@NgModule({
  declarations: [YourComponent],
  imports: [
    CommonModule,
    MatSelectModule,
    MatOptionModule // 这个模块千万别漏！
  ]
})
export class YourModule { }

要是漏了MatOptionModule，不仅样式会出错，组件功能也可能失效。

4. 排查自定义样式冲突 #

有时候你自己写的全局样式或者组件内样式会覆盖Material的默认样式，比如不小心给所有元素加了display: inline-block;，或者给mat-option设置了错误的布局属性。

打开浏览器开发者工具（F12），选中一个mat-option元素，查看它的display属性——正常应该是block或者Material默认的布局。如果被改成了inline或inline-block，就找到对应的样式规则，把它去掉或者调整优先级。

按照这个顺序排查，基本就能解决问题啦！

内容的提问来源于stack exchange，提问作者Mohammad Fareed