角度材料输入字段不是样式的

Question

我想在我的项目中使用角度材料。
我已将@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';添加到我的style.css文件中，并且工作正常 - 表格，卡片，工具栏格式正确，但格式不正确。
我用代码示例here，仅仅通过复制和粘贴，其结果是这样的：

我在做什么错？这里是我的模块（它不是主模块）：

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 { 
} 

我不明白我在做什么错。我的表格看起来并不像预期的那样行事。

Answer 1

您需要导入您的模块导入输入表单场模块：

import { 
    MdInputModule, 
    MdFormFieldModule 
} from '@angular/material'; 

// .... 
imports: [ 
    MdInputModule, 
    MdFormFieldModule, 
],