Material MatInputModule不工作角度9

Question

我使用的是Angular Material组件https://material.angular.io/components/input/overview但是材质动画不起作用

包依赖

"dependencies": {
"@angular/animations": "~9.1.1",
"@angular/cdk": "^9.2.1",
"@angular/common": "~9.1.1",
"@angular/compiler": "~9.1.1",
"@angular/core": "~9.1.1",
"@angular/forms": "~9.1.1",
"@angular/material": "^9.2.1",
"@angular/platform-browser": "~9.1.1",
"@angular/platform-browser-dynamic": "~9.1.1",
"@angular/router": "~9.1.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"

}，

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms';
import {MatInputModule} from '@angular/material/input';
import { MatCardModule} from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatToolbarModule} from '@angular/material/toolbar';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatFormFieldModule} from '@angular/material/form-field';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {PostCreateComponent} from './posts/post-create/post-create.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './header/header.component';
import { PostListComponent } from './posts/post-list/post-list.component';

@NgModule({
declarations: [
AppComponent,
PostCreateComponent,
HeaderComponent,
PostListComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
BrowserAnimationsModule,
MatInputModule, MatCardModule,MatButtonModule,MatToolbarModule,MatExpansionModule,MatFormFieldModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

HTML:

<form >
...
...
<mat-form-field>
<input matInput type="text" placeholder="Enter Title">
</mat-form-field>
.....
....
</form>

CSS-

mat-card{
background-color: lavender;
box-shadow: currentColor;
}
mat-form-field,
textarea{
background-color: white;
width: 100%;
margin: 10px;
}
button{
background-color: indigo;
color: ivory;
margin-left: 10px;
}

Answer 1

您使用的Angular material版本是什么？

要知道版本，请打开您的package.json文件并搜索@angular/material

如果您的版本小于或等于8.0.0，则app.module.ts中的导入模块将为以下格式：

import {MatInputModule} from '@angular/material

别忘了在导入数组中导入它

导入：[MatInputModule}

如果您的版本高于8.0.0，则app.module.ts中的导入模块将为以下格式：

import {MatInputModule} from '@angular/material/input';

别忘了在导入数组中导入它

导入：[MatInputModule}

Answer 2

请在相应模块的@NgModule装饰器中导入MatInputModule，如下所示；

@NgModule({
declarations: [
AppComponent,
UserComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})