Angular 8材质未渲染

Question

我的Angular 8 Material组件无法正确渲染，应类似于以下示例：

但是看起来像这样：

这是app.module.ts：

import { FormsModule } from '@angular/forms';
import {MatFormFieldModule} from '@angular/material/form-field';

@NgModule({
   declarations: [
   AppComponent,
   LoginComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  BrowserAnimationsModule,
  FormsModule,
  MatFormFieldModule
],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

这是app.component.html

<div class="example-container">
<mat-form-field>
    <input matInput placeholder="Input">
</mat-form-field>

<mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>

<mat-form-field>
    <mat-select placeholder="Select">
        <mat-option value="option">Option</mat-option>
    </mat-select>
</mat-form-field>

Answer 1

我认为您应该使用MatSelectModule和MatInputModule

因为MatFormModule用于Matform

所以您的模块应该像这样

import { FormsModule } from '@angular/forms';
import {MatFormFieldModule} from '@angular/material/form-field';

import {MatSelectModule,MatInputModule} from '@angular/material/form-field';

@NgModule({
   declarations: [
   AppComponent,
   LoginComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  BrowserAnimationsModule,
  FormsModule,
  MatFormFieldModule,
  MatSelectModule,
  MatInputModule
],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

您也可以在style.css文件中导入CSS

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

WORKING DEMO

Answer 2

您必须将MatInputModule（用于输入和文本区域）和MatSelectModule（用于选择）添加到app.module.ts文件中。

您可以在此页面顶部看到组件所需的内容：

material input component

material select component