[英]Angular Material input fields are not styled
我想在我的项目中使用角度材料。
我添加了@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
进入我的style.css文件,它工作正常 - 表格,卡片,工具栏的样式正确,但形式不是。
我在这里使用了代码中的代码,只需复制和粘贴,结果如下所示:
我究竟做错了什么? 这是我的模块(它不是主模块):
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ImageListComponent} from './image-list.component';
import {ImageListService} from './image-list.service';
import {FileSizePipe} from '../shared/file-size.pipe';
import {
MdAutocompleteModule,
MdButtonModule,
MdCardModule,
MdChipsModule,
MdTableModule
} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';
import {EnvironmentVariableComponent, ImageRunComponent} from './image-run.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { InputTestComponent } from './input-test.component';
@NgModule({
imports: [
CommonModule,
HttpClientModule,
BrowserAnimationsModule,
MdButtonModule,
MdCardModule,
MdChipsModule,
MdTableModule,
CdkTableModule,
MdAutocompleteModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [ImageListComponent, FileSizePipe, ImageRunComponent, EnvironmentVariableComponent, InputTestComponent],
providers: [ImageListService],
exports: [ImageListComponent, ImageRunComponent, InputTestComponent]
})
export class ImageModule {
}
这是我的主要模块:
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {ImageModule} from './image/image.module';
import {MdToolbarModule} from "@angular/material";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ImageModule,
BrowserAnimationsModule,
MdToolbarModule,
FormsModule,
ReactiveFormsModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
我不明白我做错了什么。 我的表格看起来并没有像它想象的那样表现。
您需要在模块导入中导入输入和表单字段模块:
import {
MdInputModule,
MdFormFieldModule
} from '@angular/material';
// ....
imports: [
MdInputModule,
MdFormFieldModule,
],
这也可能发生,因为您没有用<mat-form-field>
包装<input matInput>
<mat-form-field>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.