角度材质未显示正确的样式

Question

我正在尝试将 Angular Material 用于基于模板的表单中的自动完成组件，但它基本上对输入的样式没有任何作用。

我已经按照official docs 中的说明导入了所有模块和样式，但没有任何变化，这就是我得到的：

这就是我想要的：

这是我的代码：

html:

 <mat-form-field>
      <input type="text" matInput [formControl]="myControl" name="myFirstMaterialComp" [matAutocomplete]="auto">
 </mat-form-field>
 <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let location of locations | async" [value]="location.toponymName">
              <span>{{ location.toponymName }}</span> |
       </mat-option>
  </mat-autocomplete>

而且我在 ts 中拥有所有导入以及 css 类的导入，我确信我错过了一些非常明显的东西，但我就是不知道是什么......

编辑为清楚起见：

我已经使用文档中提供的行导入了角度主题：

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

Answer 1

您将自动完成与材料输入一起使用，因此您需要同时导入：

import {MatAutocompleteModule, MatInputModule} from '@angular/material';