Angular 7 - 材质组件 CSS 未加载答案

【问题标题】：Angular 7 - Material component CSS not loadingAngular 7 - 材质组件 CSS 未加载
【发布时间】：2019-12-21 11:31:58
【问题描述】：

我正在开发一个新的 Angular 7 项目并尝试使用开箱即用的材料组件。

一些 css 没有被应用，我似乎无法找到原因。

例如，我有一个声明为 matInput，但没有应用样式，它看起来仍然像一个基本的 HTML 输入，但正在应用其他东西的样式，例如卡片。

这是我的 angular.json：

styles.scss

输入栏：

我是否缺少样式表或忘记了什么？为什么我的 matInput 没有被格式化？

【问题讨论】：

用包裹输入标签
将 matinputmodule 导入到声明该组件的模块中
@Y_Moshe 谢谢。我以前使用过，但没有意识到特定标签是应用 CSS 格式的标签。我以为是 matInput 标志应用了它。

标签： css angular angular-material material-design

【解决方案1】：

这是我过去如何声明的一个示例，希望它会有所帮助：

<form (submit)="onSaveProject(projectForm, projectForm.value)" #projectForm="ngForm" *ngIf="!isloading">
 <mat-form-field>
  <input matInput type="text" name="projectDescirption" 
  [ngModel]="project?.projectDescirption"
  required
  minlength="5"
  placeholder="Project Description"
  #projectDescirption="ngModel">
  <mat-error *ngIf="projectDescirption.invalid">Please descibe the project (minimum 5 characters)</mat-error>
 </mat-form-field>
</form>

还要确保你已经导入了模块，这里又是我过去如何做的一个例子：

app.moudle.ts

import { 
 MatInputModule,
 MatCardModule,
 MatButtonModule,
 MatFormFieldModule,
 MatToolbarModule,
 MatExpansionModule,
 MatProgressSpinnerModule,
 MatPaginatorModule,
 MatDialogModule,
 MatOptionModule,
 MatSelectModule,
 MatDividerModule,
 MatCheckboxModule,
 MatSlideToggleModule,
 MatProgressBarModule,
 MatDatepickerModule,
 MatNativeDateModule
} from '@angular/material';

@NgModule({
 imports: [
  MatInputModule,
  MatCardModule,
  MatButtonModule,
  MatFormFieldModule,
  MatToolbarModule,
  MatExpansionModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatDialogModule,
  MatOptionModule,
  MatSelectModule,
  MatDividerModule,
  MatCheckboxModule,
  MatSlideToggleModule
]
})

【讨论】：