首页 文章

未定义Angular 4 Material步进标签

提问于
浏览 次
0

我正在尝试使用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

angular class angular-material angular-material2 angular-material-stepper

4 回答

  • 1

    你必须从'@angular/material'导入 ; import 来自'@angular/material';在 app.ts

    回复于
  • 0

    导入这一切并检查
    进口{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
  ]
})
    回复于
  • 0

    请注意，应在您的应用程序模块和 not 组件中导入模块（例如 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 { }
    回复于
  • 0

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

    回复于

相关问题