未定义Angular 4 Material步进标签

Question

我正在尝试使用Angular Material步进器，浏览文档但是当我在我的Angular应用程序中粘贴HTML Material步进器标签时，它告诉我它不是已知元素。

HTML：

<mat-horizontal-stepper [linear]="isLinear" 
#stepper="matHorizontalStepper">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" 
formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" 
required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>

组件TS：

import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatStepperIntl, MatStepperModule} from '@angular/material';

export class AddSchoolComponent implements OnInit {


isLinear = false;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;

constructor(
          private _formBuilder: FormBuilder,
          ) {}

ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
  firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
  secondCtrl: ['', Validators.required]
});
}
}

App TS：

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatStepperModule} from '@angular/material';
import {MatStepperIntl} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';

imports: [
MatStepperModule,
NoopAnimationsModule,
BrowserAnimationsModule,
MatButtonModule, MatCheckboxModule,],
providers: [ MatStepperModule,
MatStepperIntl,
 {provide: MatStepperIntl, useClass: MyIntl},
],

告诉我在app模块中找不到名字MyIntl。

控制台中的错误消息：

'mat-form-field'不是已知元素：1。如果'mat-form-field'是Angular组件，则验证它是否是该模块的一部分。 2.如果'mat-form-field'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息。 （ “formGroup] =” firstFormGroup“>

我需要一些帮助，知道为什么app模块无法识别MyIntl类以及为什么我的HTML中不知道stepper标签。

我按照以下说明链接：This link

文档link

Answer 1

你必须从'@ angular / material'导入{ MatFormFieldModule };来自'@ angular / material'的import { MatInputModule };在app.ts

Answer 2

导入这一切并检查 进口{MatAutocompleteModule，MatButtonModule，MatButtonToggleModule，MatPaginatorModule，MatCardModule，MatCheckboxModule，MatChipsModule，MatDatepickerModule，MatDialogModule，MatDividerModule，MatGridListModule，MatIconModule，MatInputModule，MatListModule，MatMenuModule，MatProgressBarModule，MatProgressSpinnerModule，MatRadioModule，MatSelectModule，MatSidenavModule，MatSliderModule，MatSortModule，MatSlideToggleModule，MatSnackBarModule，来自'@ angular / material'的MatTableModule，MatTabsModule，MatToolbarModule，MatTooltipModule，MatFormFieldModule，MatExpansionModule，MatStepperModule，MatDatepicker，MatNativeDateModule};

@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatSliderModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatStepperModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})

Answer 3

请注意，应在您的应用程序模块中导入模块（例如MatButtonModule，BrowserModule等），而不是您的组件。

在开始使用Angular之前，请先阅读Angular documentation。您还可以查看API选项卡以获取所需的import语句（以及您要使用的Material组件所需的模块）

（P.S.我建议您使用材料组件的功能模块。）

material.module.ts：

import { NgModule } from '@angular/core';
import { MatStepperModule } from '@angular/material/stepper';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatStepperModule
  ]
})
export class MaterialModule {}

app.module.ts：

import { MaterialModule } from './material.module';
import { NgModule } from '@angular/core';
// etc.

@NgModule({
  imports: [
    MaterialModule,
    // etc.
  ]
})
export class AppModule { }

Answer 4

问题是我使用Angular材质的Angular bootstrap，它们不能相互协作，这就是为什么它从未与我合作过。我希望能帮助任何人。