Mat对话框‘mat-标签’不是一个已知的元素。

Question

我有一个angular 5.0.2应用程序。我正在尝试在我的MatDialog组件中放置一个表单。该对话框正常工作，但当我从其中的字段中输入时，它会中断并给出错误。

compiler.js:466 Uncaught :模板解析错误：'mat-label‘不是已知的元素：

1个 。如果“垫子标签”是一个角组件，那么验证它是这个模块的一部分。

下面是对话框组件ts

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'email-dialog',
  templateUrl: './email-dialog.component.html',
  styleUrls: ['./email-dialog.component.css']
})

export class EmailDialogComponent {
  
    constructor(
    public dialogRef: MatDialogRef<EmailDialogComponent>) { }
  
onNoClick(): void {
    this.dialogRef.close();
  }
}

html

<div mat-dialog-content>
  <mat-form-field>
    <mat-label>Title</mat-label>
    <mat-input placeholder="Title"></mat-input>
  </mat-form-field>   
</div>
  <div mat-dialog-actions>
     <button class="cfm-btn btn-n"  mat-button (click)="onNoClick()">Cancel</button>
     <button class="cfm-btn btn-y"  mat-button [mat-dialog-close]="true">Send</button>
</div>

这是我的app.module。我已经导入了MatFormFieldModule，并将它们放在imports和exports下--我不知道我缺少了什么。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Http, HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { GlobalService } from './shared/global.service';
import { SharedModule } from './shared/shared.module';
import { LP_HTTP_PROVIDERS } from './shared/http.interceptor';
import { GenericService } from 'app/shared/generic.service';
import { RequestSelectComponent } from 'app/request/request-select.component';
import {MatTableModule} from '@angular/material/table';
import { MatProgressSpinnerModule, MatSliderModule, MatButtonToggleModule, MatChipsModule, MatFormFieldModule, MatButtonModule, MatSelectModule, MatCheckboxModule, MatInputModule, MatRadioModule, MatAutocompleteModule, MatTooltipModule, MatTabsModule, MatGridListModule, MatSnackBarModule, MatProgressBarModule, MatDialogModule, MatCardModule, MatExpansionModule, MatIconModule, MatDatepickerModule, MatNativeDateModule, MatPaginatorModule, MatSortModule } from '@angular/material';
import { DynamicFormComponent } from 'app/questionnaire/dynamic-form.component';
import { DynamicFormGroupComponent } from 'app/questionnaire/dynamic-form-group.component';
import { DynamicFormQuestionComponent } from 'app/questionnaire/dynamic-form-question.component';
import { LoadingComponent } from 'app/loading/loading.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { VaultComponent } from 'app/components/vault.component';
import { CookieService } from 'ngx-cookie-service';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ProjectOrderCodeComponent } from 'app/questionnaire/project-order-code.component';
import { ProjectOrderCodeKitsComponent } from 'app/questionnaire/project-order-code-kits.component';
import { OwlDateTimeModule } from 'ng-pick-datetime';
import { DateTimePickComponent } from 'app/questionnaire/datetime-picker.component';
import { DraftSearchComponent } from 'app/modals/draft-search.component';
import { ZupSearchComponent } from 'app/questionnaire/zup-search.component';
import { ProjectConversionComponent } from 'app/project-conversion/project-conversion.component';
import { ProjectConversionRowComponent } from 'app/project-conversion/project-conversion-row.component';
import { ProjectConversionRowFilterComponent } from 'app/project-conversion/project-conversion-row-filter.component';
import { ProjectConversionRowFiltersComponent } from 'app/project-conversion/project-conversion-row-filters.component';
import { WorkfrontParameterComponent } from 'app/project-conversion/workfront-parameter.component';
import { RadioControlComponent } from 'app/workfront-controls/radio-control.component';
import { MultiSelectControlComponent } from 'app/workfront-controls/multi-select-control.component';
import { SelectControlComponent } from 'app/workfront-controls/select-control.component';
import { TextControlComponent } from 'app/workfront-controls/text-control.component';
import { DateControlComponent } from 'app/workfront-controls/date-control.component';
import { CheckboxControlComponent } from 'app/workfront-controls/checkbox-control.component';
import { SelfServicingComponent } from 'app/self-servicing/self-servicing.component';
import { OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { OWL_DATE_TIME_FORMATS } from 'ng-pick-datetime';
import { ZupAdvancedSearchComponent } from 'app/zup-advanced-search/zup-advanced-search.component';
import { ZupAdvancedSearchResultsComponent } from 'app/zup-advanced-search/zup-advanced-search-results.component';
import { CopyRequestComponent } from './modals/copy-request.component';
import { CsatEmailComponent } from 'app/csat/csat-email.component';
import {ConfirmationDialogComponent} from 'app/components/confimation-dialog/confirmation-dialog.component'; 
import {EmailDialogComponent} from 'app/components/email-component/email-dialog.component';
@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        RouterModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        MatButtonModule,
        MatSelectModule,
        MatCheckboxModule,
        MatInputModule,
        MatRadioModule,
        MatAutocompleteModule,
        MatTooltipModule,
        MatTabsModule,
        MatSnackBarModule,
        MatGridListModule,
        MatProgressBarModule,
        MatCardModule,
        MatExpansionModule,
        MatIconModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatTableModule,
        MatPaginatorModule,
        FlexLayoutModule,
        OwlDateTimeModule,
        OwlNativeDateTimeModule,
        MatDialogModule,
        MatSortModule,
        MatFormFieldModule,
        MatChipsModule,
        MatButtonToggleModule,
        MatSliderModule,
        MatProgressSpinnerModule
    ],
    providers: [
        GlobalService,
        GenericService,
        LP_HTTP_PROVIDERS,
        CookieService,
        {provide: OWL_DATE_TIME_LOCALE, useValue: 'en-US'}
    ],
    entryComponents: [ConfirmationDialogComponent, EmailDialogComponent],
    exports: [ SharedModule, MatTableModule, MatFormFieldModule ],
    declarations: [ AppComponent, RequestSelectComponent, DynamicFormComponent, DynamicFormGroupComponent, DynamicFormQuestionComponent, LoadingComponent, VaultComponent, ProjectOrderCodeComponent, DateTimePickComponent, DraftSearchComponent, ZupSearchComponent, ProjectConversionComponent, ProjectConversionRowComponent, ProjectConversionRowFiltersComponent, ProjectConversionRowFilterComponent, WorkfrontParameterComponent, RadioControlComponent, MultiSelectControlComponent, SelectControlComponent, TextControlComponent, DateControlComponent, CheckboxControlComponent, SelfServicingComponent, ZupAdvancedSearchComponent, ZupAdvancedSearchResultsComponent, ProjectOrderCodeKitsComponent, CopyRequestComponent, CsatEmailComponent,
        ConfirmationDialogComponent, EmailDialogComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 1

您不必同时导出两个MatTableModule, MatFormFieldModule，尝试删除它们并查看是否有效。

Answer 2

在我的例子中，我错过了向Dialog添加一个声明。解决了我的问题。

declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    MapComponent,
    **ContactDetailsDialog**
  ]