为什么 mat-form-field 没有出现？

Question

在我的 package.json 上，我有 @angular/material": "^13.3.8"，但我使用的是 13.3.7 版本和 Angular CLI: 13.3.7。我只是从 Angular Material 复制代码，并且已经在我的 app.module.ts 上导入了 MatInputModule。我的问题是 mat-form-field 没有显示在我的浏览器上。我需要单击我的输入所在的区域，然后它才会显示出来。如下图所示：

在我点击 mat-form-field 之前

点击mat-form-field之后

我该如何解决这个问题？这是我的代码：

product.component.html

<div class="example-container">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Filter</mat-label>
    <input matInput placeholder="Search...">
  </mat-form-field>
</div>

app.module.ts

BrowserModule,
AppRoutingModule,
NgbModule,
BrowserAnimationsModule,
MatTableModule,
MatCardModule,
MatPaginatorModule,
MatInputModule,
MatIconModule,
MatButtonModule,
FormsModule,
FontAwesomeModule,
MatFormFieldModule,
ReactiveFormsModule

Answer 1

您需要在 style.scss 或 angular.json 样式数组中导入 material 样式。这是一个例子

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

为什么 mat-form-field 没有出现？

Why the mat-form-field is not showing up?

typescript

angular-material

angular

mat-form-field