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

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类的导入，我确定它是非常明显的，我错过了，但我只能＆＃39;弄清楚是什么......

为清晰起见，

编辑：

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

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

Answer 1

您对材料输入使用自动完成功能，因此您需要同时导入：

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