0

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

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]
});
}
}

应用 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},
],

告诉我在应用程序模块中找不到名称 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 标签。

我按照以下说明的链接： 此链接

文档链接

4

4 回答 4

1

您必须 { MatFormFieldModule }从“@angular/material”导入； import { MatInputModule }来自“@角/材料”；在app.ts

于 2018-02-28T13:03:27.427 回答
1

问题是我将 Angular 引导程序与 Angular 材料一起使用，它们不能相互配合，这就是为什么它从未与我配合使用的原因。我希望这对任何人都有帮助。

于 2018-03-06T14:07:23.740 回答
0

import this all and check
import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatPaginatorModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSortModule , MatSlideToggleModule, MatSnackBarModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatFormFieldModule, MatExpansionModule, MatStepperModule, MatDatepicker,MatNativeDateModule } 来自'@angular/material';

@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
  ]
})
于 2018-02-28T13:17:12.937 回答
0

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

在开始使用 Angular 之前，请阅读Angular 文档。您还可以查看您需要的导入语句的 API 选项卡（以及您想要使用的 Material 组件工作所需的模块）

（PS 我建议您对 Material 组件使用功能模块。）

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 { }
于 2018-03-06T10:38:49.030 回答