角度材料輸入字段不是樣式的

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, 
],