угловой 6 материал 2 класса не добавляется - PullRequest
Новая
       13

угловой 6 материал 2 класса не добавляется

0 голосов
/ 21 сентября 2018

Я добавил 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>

Ответы [ 3 ]

0 голосов
/ 22 сентября 2018

Я мог решить проблему.

Я не добавил импорт и экспорт компонентов дизайна материалов в файл 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 { }
0 голосов
/ 22 сентября 2018

попробуйте выполнить эту команду в папке вашего приложения. 

ng add @angular/material

, и в вашем модуле, похоже, отсутствует "FormFieldModule". 

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
  ...
    MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
0 голосов
/ 21 сентября 2018

Имя директивы чувствительно к регистру.Используйте 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>
...