Question

我已经为我的角度项目添加了Material Design。

我从Angular Material添加了一个基本输入框。 https://material.angular.io/components/input/overview

但是，当我使用该组件打开页面时，看到的只是纯HTML类型的输入框。我看到没有类添加到输入中，如下面呈现的HTML代码所示。我与Angular文档进行了比较，发现那里缺少许多类。

我在这里想念什么？

来自组件HTML的代码：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>
  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

打字稿代码：

import { Component, OnInit } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material';

@Component({
  selector: 'app-testmatinput',
  templateUrl: './testmatinput.component.html',
  styleUrls: ['./testmatinput.component.css']
})
export class TestmatinputComponent {}

app.module.ts代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/Forms';
import { RouterModule, Routes } from '@angular/router';
import { DatePipe } from '@angular/common'

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { EscapeHtmlPipe } from './keep-html.pipe';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { TaskCardComponent } from './components/task-card/task-card.component';
import { TestmatinputComponent } from './components/testmatinput/testmatinput.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    NavbarComponent,
    EscapeHtmlPipe,
    TestmatinputComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [DatePipe],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],
  entryComponents: [ TaskCardComponent ]
})
export class AppModule { }

在浏览器中呈现的代码：

<app-testmatinput _nghost-c3="">
  <form _ngcontent-c3="" class="example-form ng-untouched ng-pristine ng-valid" novalidate="">
    <mat-form-field _ngcontent-c3="" class="example-full-width"><input _ngcontent-c3="" matinput="" placeholder="Favorite food"
        value="Sushi"></mat-form-field>
    <mat-form-field _ngcontent-c3="" class="example-full-width"><textarea _ngcontent-c3="" matinput="" placeholder="Leave a comment"></textarea></mat-form-field>
  </form>
</app-testmatinput>

Answer 1

指令名称区分大小写。使用matInput NOT matinput并确保您要在项目中导入模块。试试这个：

<app-testmatinput>
  <form class="example-form ng-untouched ng-pristine ng-valid" novalidate="">
    <mat-form-field class="example-full-width"><input matInput="" placeholder="Favorite food" value="Sushi"></mat-form-field>
    <mat-form-field class="example-full-width"><textarea matInput="" placeholder="Leave a comment"></textarea></mat-form-field>
  </form>
</app-testmatinput>

Answer 2

我可以解决问题。

我没有在app.module文件中添加材料设计组件的导入和导出。

谢谢大家！

下面是我的新app.module.ts文件代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/Forms';
import { RouterModule, Routes } from '@angular/router';
import { DatePipe } from '@angular/common'

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { EscapeHtmlPipe } from './keep-html.pipe';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { TaskCardComponent } from './components/task-card/task-card.component';
import { TestmatinputComponent } from './components/testmatinput/testmatinput.component';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule
} from '@angular/material';
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    NavbarComponent,
    EscapeHtmlPipe,
    TaskCardComponent,
    TestmatinputComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule
  ],
  exports:[
    MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule
  ],
  providers: [DatePipe],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],
  entryComponents: [ TaskCardComponent ]
})
export class AppModule { }

Answer 3

尝试在您的应用程序文件夹中运行此命令

ng add @angular/material

和“ FormFieldModule”似乎在您的模块中丢失。

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
  ...
    MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

角6材料2类未添加

3 个答案: