javascript - 模板解析错误：'mat-option' 不是已知元素：

Question

我尝试通过单击按钮来构建从材料表调用的弹出表单

这是我的主要组件代码

 import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator, MatDialog, MatDialogConfig} from '@angular/material';
import { PAYMENTS } from "./payments-mock";
import { CourseDialogComponent } from './course-dialog.component';


@Component({
  selector: 'app-payments',
  templateUrl: './payments.component.html',
  styleUrls: ['./payments.component.scss']
})
export class PaymentsComponent implements AfterViewInit {

  constructor(private dialog: MatDialog) {}
  openDialog() {

    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    dialogConfig.data = {
      id: 1,
      title: 'Angular For Beginners'
    };
    this.dialog.open(CourseDialogComponent, dialogConfig);

    const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
        data => console.log("Dialog output:", data)
    );    
}

  //Default values to checkboxes
  pending = false;
  approved = false;
  rejected = false;

  //List of displaying columns
  displayedColumns = ['PaymentDate','Amount','StatusDescription','Reason','Action'];
  dataSource = new MatTableDataSource(PAYMENTS);


  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.filterPredicate =
     (data, filter: string) => !filter || data.StatusDescription === filter;
  }

  //Methods for checkboxes
  pendingModelChecked(value: any) {
    const filter = value ? 'Pending' : null
    this.dataSource.filter = filter;
  }

  approvedModelChecked(value: any) {
    const filter = value ? 'Approved' : null
    this.dataSource.filter = filter;
  }

  rejectedModelChecked(value: any) {
    const filter = value ? 'Rejected' : null
    this.dataSource.filter = filter;
  }
}

这是对话框组件代码

 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
    selector: 'course-dialog',
    templateUrl: './course-dialog.component.html',
    styleUrls: ['./course-dialog.component.scss']
})
export class CourseDialogComponent implements OnInit {

    form: FormGroup;
    description:string;

    constructor(
        private fb: FormBuilder,
        private dialogRef: MatDialogRef<CourseDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data) {

        this.description = data.description;
    }

    ngOnInit() {
        this.form = this.fb.group({
            description: [this.description, []],
        });
    }

    save() {
        this.dialogRef.close(this.form.value);
    }

    close() {
        this.dialogRef.close();
    }
}

这是 app.module.ts 文件中的代码

 import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CustomMaterialModule} from "./CustomMaterialModule";
import { PaymentsComponent } from './payments/payments.component';
import { MatPaginatorModule, MatCheckboxModule, MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule, MATERIAL_SANITY_CHECKS} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { CourseDialogComponent } from './payments/course-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    PaymentsComponent,
    CourseDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CustomMaterialModule,
    MatPaginatorModule,
    MatCheckboxModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule
  ],
  providers: [
    {
      provide: MATERIAL_SANITY_CHECKS,
      useValue: false
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我尝试运行应用程序时出现此错误

未捕获的错误：模板解析错误：'mat-option' 不是已知元素：1. 如果 'mat-option' 是 Angular 组件，则验证它是否是此模块的一部分。2. 如果“mat-option”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。("formControlName="类别">

我的问题在哪里？

标签： javascriptangulartypescriptangular-material