Angular 显示错误 NG8001：“mat-option”不是已知元素：请帮我解决该错误。
我正在使用 ```CLI：16.1.4 节点：16.16.0 包管理器：npm 9.8.0 操作系统：win32 x64
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.4
@angular-devkit/build-angular 16.1.4
@angular-devkit/core 16.1.4
@angular-devkit/schematics 16.1.4
@angular/cdk 16.1.5
@angular/cli 16.1.4
@angular/material 16.1.5
@schematics/angular 16.1.4
rxjs 7.8.1
typescript 5.1.6```
我的app.module.ts文件是
```import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {MatLabelModule} from '@angular/material/MatLable';
import { MatFormFieldModule } from '@angular/material/form-field';
import { XExpiredDialogBoxComponent } from './mainwindow/x-expired-dialog-box/x-expired-dialog-box.component';
import { DoctorSignupComponent } from './auth/doctorAuth/doctorSignup/doctorSignup.component';
import { AuthGuard } from './auth/auth.guard';
import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule , FormsModule } from '@angular/forms';
import { ChartsModule, NgChartsModule } from 'ng2-charts';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Ng2CarouselamosModule } from 'ng2-carouselamos';
import { GoogleChartsModule } from 'angular-google-charts';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatPaginatorModule, MatInputModule, MatDialogModule, MatButtonModule, MatRadioModule, MatSnackBarModule } from '@angular/material';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { HeaderUserdetailsComponent } from './header/header-userdetails/header-userdetails.component';
import { HeaderTaskbarComponent } from './header/header-taskbar/header-taskbar.component';
import { SidemenuComponent } from './sidemenu/sidemenu.component';
import { MenuitemComponent } from './sidemenu/menuitem/menuitem.component';
import { MainwindowComponent } from './mainwindow/mainwindow.component';
import { StatPanelComponent } from './mainwindow/stat-panel/stat-panel.component';
import { ExpiredateWindowComponent } from './mainwindow/expiredate-window/expiredate-window.component';
import { ExpiredateWindowItemComponent } from './mainwindow/expiredate-window/expiredate-window-item/expiredate-window-item.component';
import { SaleschartWindowComponent } from './mainwindow/saleschart-window/saleschart-window.component';
import { OutofstockWindowComponent } from './mainwindow/outofstock-window/outofstock-window.component';
import { OutofstockWindowItemComponent } from './mainwindow/outofstock-window/outofstock-window-item/outofstock-window-item.component';
import { PredictionchartWindowComponent } from './mainwindow/predictionchart-window/predictionchart-window.component';
import { SalesdetailsWindowComponent } from './mainwindow/salesdetails-window/salesdetails-window.component';
import { SalesdetailsItemsComponent } from './mainwindow/salesdetails-window/salesdetails-items/salesdetails-items.component';
import { ADoctorOrderWindowComponent } from './mainwindow/a-doctor-order-window/a-doctor-order-window.component';
import { NewDoctorOrderWindowComponent } from './mainwindow/a-doctor-order-window/new-doctor-order-window/new-doctor-order-window.component';
import { VerifiedDoctorOrderWindowComponent } from './mainwindow/a-doctor-order-window/verified-doctor-order-window/verified-doctor-order-window.component';
import { PickupOrderWindowComponent } from './mainwindow/a-doctor-order-window/pickup-order-window/pickup-order-window.component';
import { NewDoctorOrderItemComponent } from './mainwindow/a-doctor-order-window/new-doctor-order-window/new-doctor-order-item/new-doctor-order-item.component';
import { VerifiedDoctorOrderItemComponent } from './mainwindow/a-doctor-order-window/verified-doctor-order-window/verified-doctor-order-item/verified-doctor-order-item.component';
import { PickupOrderItemComponent } from './mainwindow/a-doctor-order-window/pickup-order-window/pickup-order-item/pickup-order-item.component';
import { APointofsaleWindowComponent } from './mainwindow/a-pointofsale-window/a-pointofsale-window.component';
import { AddToBillComponent } from './mainwindow/a-pointofsale-window/add-to-bill/add-to-bill.component';
import { BillWindowComponent } from './mainwindow/a-pointofsale-window/bill-window/bill-window.component';
import { BillItemComponent } from './mainwindow/a-pointofsale-window/bill-window/bill-item/bill-item.component';
import { CheckOutWindowComponent } from './mainwindow/a-pointofsale-window/check-out-window/check-out-window.component';
import { CheckOutElementsComponent } from './mainwindow/a-pointofsale-window/check-out-window/check-out-elements/check-out-elements.component';
import { ASuppliersWindowComponent } from './mainwindow/a-suppliers-window/a-suppliers-window.component';
import { AddSupplierWindowComponent } from './mainwindow/a-suppliers-window/add-supplier-window/add-supplier-window.component';
import { SupplierInventoryWindowComponent } from './mainwindow/a-suppliers-window/supplier-inventory-window/supplier-inventory-window.component';
import { SearchSupplierWindowComponent } from './mainwindow/a-suppliers-window/search-supplier-window/search-supplier-window.component';
import { AddSupplierElementsComponent } from './mainwindow/a-suppliers-window/add-supplier-window/add-supplier-elements/add-supplier-elements.component';
import { SupplierInventoryItemsComponent } from './mainwindow/a-suppliers-window/supplier-inventory-window/supplier-inventory-items/supplier-inventory-items.component';
import { AInventoryWindowComponent } from './mainwindow/a-inventory-window/a-inventory-window.component';
import { SearchInventoryComponent } from './mainwindow/a-inventory-window/search-inventory/search-inventory.component';
import { AddInventoryWindowComponent } from './mainwindow/a-inventory-window/add-inventory-window/add-inventory-window.component';
import { AddInventoryElementsComponent } from './mainwindow/a-inventory-window/add-inventory-window/add-inventory-elements/add-inventory-elements.component';
import { DrugInventoryWindowComponent } from './mainwindow/a-inventory-window/drug-inventory-window/drug-inventory-window.component';
import { DrugInventoryItemsComponent } from './mainwindow/a-inventory-window/drug-inventory-window/drug-inventory-items/drug-inventory-items.component';
import { APredictionReportWindowComponent } from './mainwindow/a-prediction-report-window/a-prediction-report-window.component';
import { PredictionChartWindowComponent } from './mainwindow/a-prediction-report-window/prediction-chart-window/prediction-chart-window.component';
import { ChartWindowComponent } from './mainwindow/a-prediction-report-window/chart-window/chart-window.component';
import { PredictionChartItemsComponent } from './mainwindow/a-prediction-report-window/chart-window/prediction-chart-items/prediction-chart-items.component';
import { PredictionReportItemsComponent } from './mainwindow/a-prediction-report-window/prediction-chart-window/prediction-report-items/prediction-report-items.component';
import { ASalesWindowComponent } from './mainwindow/a-sales-window/a-sales-window.component';
import { SalesChartComponent } from './mainwindow/a-sales-window/sales-chart/sales-chart.component';
import { SalesReportComponent } from './mainwindow/a-sales-window/sales-report/sales-report.component';
import { SalesReportItemsComponent } from './mainwindow/a-sales-window/sales-report/sales-report-items/sales-report-items.component';
import { AExpOutofstockWindowComponent } from './mainwindow/a-exp-outofstock-window/a-exp-outofstock-window.component';
import { ExpiredWindowComponent } from './mainwindow/a-exp-outofstock-window/expired-window/expired-window.component';
import { ExpiredItemsComponent } from './mainwindow/a-exp-outofstock-window/expired-window/expired-items/expired-items.component';
import { OutOfStockWindowComponent } from './mainwindow/a-exp-outofstock-window/out-of-stock-window/out-of-stock-window.component';
import { OutofstockItemsComponent } from './mainwindow/a-exp-outofstock-window/out-of-stock-window/outofstock-items/outofstock-items.component';
import { AboutToExpireWindowComponent } from './mainwindow/a-exp-outofstock-window/about-to-expire-window/about-to-expire-window.component';
import { AboutToExpireItemsComponent } from './mainwindow/a-exp-outofstock-window/about-to-expire-window/about-to-expire-items/about-to-expire-items.component';
import { AboutToFinishWindowComponent } from './mainwindow/a-exp-outofstock-window/about-to-finish-window/about-to-finish-window.component';
import { AboutToFinishItemsComponent } from './mainwindow/a-exp-outofstock-window/about-to-finish-window/about-to-finish-items/about-to-finish-items.component';
import { AShoppingCartWindowComponent } from './mainwindow/a-inventory-window/a-shopping-cart-window/a-shopping-cart-window.component';
import { AShoppingCartWindowComponent } from './mainwindow/a-inventory-window/a-shopping-cart-window/a-shopping-cart-window.component';
import { AShoppingCartItemsComponent } from './mainwindow/a-inventory-window/a-shopping-cart-window/a-shopping-cart-items/a-shopping-cart-items.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LoginComponent } from './auth/login/login.component';
import { SignupComponent } from './auth/signup/signup.component';
import { AuthInterceptor } from './auth/auth-interceptor';
import { SupplierFilterPipe } from './mainwindow/a-suppliers-window/supplier-filter.pipe';
import { InventoryFilterPipe } from './mainwindow/a-inventory-window/inventory-filter.pipe';
import { DoctorLoginComponent } from './auth/doctorAuth/doctorLogin/doctorLogin.component';
import { XConfigurationSettingsAdminComponent } from './mainwindow/x-configuration-settings-admin/x-configuration-settings-admin.component';
import { ManageDoctorAccountComponent } from './mainwindow/x-configuration-settings-admin/manage-doctor-account/manage-doctor-account.component';
import { ManageAssistantPharmasistAccountComponent } from './mainwindow/x-configuration-settings-admin/manage-assistant-pharmasist-account/manage-assistant-pharmasist-account.component';
import { ManageCashierAccountComponent } from './mainwindow/x-configuration-settings-admin/manage-cashier-account/manage-cashier-account.component';
import { AddNewUsersComponent } from './mainwindow/x-configuration-settings-admin/add-new-users/add-new-users.component';
import { AddPhamacyUserComponent } from './mainwindow/x-configuration-settings-admin/add-new-users/add-phamacy-user/add-phamacy-user.component';
import { AddDoctorUserComponent } from './mainwindow/x-configuration-settings-admin/add-new-users/add-doctor-user/add-doctor-user.component';
import { AboutToOutofStockWindowComponent } from './mainwindow/about-to-outof-stock-window/about-to-outof-stock-window.component';
import { AboutToOutofStockItemsComponent } from './mainwindow/about-to-outof-stock-window/about-to-outof-stock-items/about-to-outof-stock-items.component';
import { XOutofstockDialogBoxComponent } from './mainwindow/xoutofstock-dialog-box/xoutofstock-dialog-box.component';
import { MatOptionModule } from '@angular/material/core';
const appRoutes: Routes =[
{ path: '',component: MainwindowComponent},
{ path: 'doctororders',component: ADoctorOrderWindowComponent },
{ path: 'pos',component: APointofsaleWindowComponent },
{ path: 'suppliers',component: ASuppliersWindowComponent },
{ path: 'predictionreport',component: APredictionReportWindowComponent,canActivate:[AuthGuard] },
{ path: 'salesreport',component: ASalesWindowComponent,canActivate:[AuthGuard] },
{ path: 'inventory',component: AInventoryWindowComponent },
{ path: 'expoutofstock',component: AExpOutofstockWindowComponent },
{ path: 'shoppingcart',component: AShoppingCartWindowComponent },
{ path: 'settings',component: XConfigurationSettingsAdminComponent }
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
HeaderUserdetailsComponent,
HeaderTaskbarComponent,
SidemenuComponent,
MenuitemComponent,
MainwindowComponent,
StatPanelComponent,
ExpiredateWindowComponent,
ExpiredateWindowItemComponent,
SaleschartWindowComponent,
OutofstockWindowComponent,
OutofstockWindowItemComponent,
PredictionchartWindowComponent,
SalesdetailsWindowComponent,
SalesdetailsItemsComponent,
ADoctorOrderWindowComponent,
NewDoctorOrderWindowComponent,
VerifiedDoctorOrderWindowComponent,
PickupOrderWindowComponent,
NewDoctorOrderItemComponent,
VerifiedDoctorOrderItemComponent,
PickupOrderItemComponent,
APointofsaleWindowComponent,
AddToBillComponent,
BillWindowComponent,
BillItemComponent,
CheckOutWindowComponent,
CheckOutElementsComponent,
ASuppliersWindowComponent,
AddSupplierWindowComponent,
SupplierInventoryWindowComponent,
SearchSupplierWindowComponent,
AddSupplierElementsComponent,
SupplierInventoryItemsComponent,
AInventoryWindowComponent,
SearchInventoryComponent,
AddInventoryWindowComponent,
AddInventoryElementsComponent,
DrugInventoryWindowComponent,
DrugInventoryItemsComponent,
APredictionReportWindowComponent,
PredictionChartWindowComponent,
ChartWindowComponent,
PredictionChartItemsComponent,
PredictionReportItemsComponent,
ASalesWindowComponent,
SalesChartComponent,
SalesReportComponent,
SalesReportItemsComponent,
AExpOutofstockWindowComponent,
ExpiredWindowComponent,
ExpiredItemsComponent,
OutOfStockWindowComponent,
OutofstockItemsComponent,
AboutToExpireWindowComponent,
AboutToExpireItemsComponent,
AboutToFinishWindowComponent,
AboutToFinishItemsComponent,
AShoppingCartWindowComponent,
AShoppingCartItemsComponent,
LoginComponent,
SignupComponent,
SupplierFilterPipe,
InventoryFilterPipe,
DoctorLoginComponent,
DoctorSignupComponent,
XExpiredDialogBoxComponent,
XConfigurationSettingsAdminComponent,
ManageDoctorAccountComponent,
ManageAssistantPharmasistAccountComponent,
ManageCashierAccountComponent,
AddNewUsersComponent,
AddPhamacyUserComponent,
AddDoctorUserComponent,
AboutToOutofStockWindowComponent,
AboutToOutofStockItemsComponent,
XOutofstockDialogBoxComponent
],
entryComponents: [
XExpiredDialogBoxComponent,
XOutofstockDialogBoxComponent
],
imports: [
MatLabelModule,
MatOptionModule,
BrowserModule,
AppRoutingModule,
ChartsModule,
RouterModule.forRoot(appRoutes),
ReactiveFormsModule,
HttpClientModule,
BrowserAnimationsModule,
MatPaginatorModule,
MatInputModule,
MatFormFieldModule,
Ng2CarouselamosModule,
MatFormFieldModule,
MatSelectModule,
GoogleChartsModule,
MatDialogModule,
MatButtonModule,
MatRadioModule,
MatSnackBarModule,
NgChartsModule
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor , multi: true},AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
```
这是我的 Package.json 文件
```{
"name": "pro",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon ./backend/server.js"
},
"private": true,
"dependencies": {
"@angular/animations": "~16.1.5",
"@angular/cdk": "~16.1.5",
"@angular/common": "~16.1.5",
"@angular/compiler": "~16.1.5",
"@angular/core": "~16.1.5",
"@angular/forms": "~16.1.5",
"@angular/material": "^16.1.5",
"@angular/platform-browser": "~16.1.5",
"@angular/platform-browser-dynamic": "~16.1.5",
"@angular/router": "~16.1.5",
"@fortawesome/fontawesome-free": "^6.4.0",
"@tensorflow/tfjs": "^4.9.0",
"angular-bootstrap-md": "^15.0.0",
"angular-google-charts": "^2.2.3",
"animate.css": "^4.1.1",
"bcrypt": "^5.1.0",
"body-parser": "^1.20.2",
"bootstrap": "^5.3.0",
"brain.js": "^2.0.0-beta.23",
"bulma": "^0.9.4",
"chart.js": "^4.3.0",
"chartist": "^1.3.0",
"express": "^4.18.2",
"flickity": "^3.0.0",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"html2pdf.js": "^0.10.1",
"jsonwebtoken": "^9.0.1",
"mongoose": "^7.4.0",
"mongoose-unique-validator": "^4.0.0",
"multer": "^1.4.2",
"ng2-carouselamos": "^4.1.0",
"ng2-charts": "^4.1.1",
"ng2-google-charts": "^7.0.0",
"nodemailer": "^6.9.4",
"rxjs": "~7.8.1",
"socket.io": "^4.7.1",
"socket.io-client": "^4.7.1",
"tslib": "^2.6.0",
"zone.js": "~0.13.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~16.1.4",
"@angular/cli": "~16.1.4",
"@angular/compiler-cli": "~16.1.5",
"@angular/language-service": "~16.1.5",
"@types/chartist": "^0.11.1",
"@types/jasmine": "~4.3.5",
"@types/jasminewd2": "~2.0.10",
"@types/node": "~20.4.2",
"codelyzer": "^0.0.28",
"jasmine-core": "~5.0.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"nodemon": "^3.0.1",
"protractor": "~5.4.0",
"ts-node": "~10.9.1",
"tslint": "~5.20.1",
"typescript": "~5.1.6"
}
}```
有人可以告诉我如何解决此错误吗？ 我尝试在 stackoverflow 上搜索此错误，但到目前为止我还没有成功。
我遇到的错误是这样的
Error: src/app/mainwindow/a-inventory-window/a-shopping-cart-window/a-shopping-cart-items/a-shopping-cart-items.component.html:159:3 - error NG8001: 'mat-select' is not a known element:
1. If 'mat-select' is an Angular component, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
159 <mat-select >
~~~~~~~~~~~~~
src/app/mainwindow/a-inventory-window/a-shopping-cart-window/a-shopping-cart-items/a-shopping-cart-items.component.ts:17:16
17 templateUrl: './a-shopping-cart-items.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AShoppingCartItemsComponent.
Error: src/app/mainwindow/a-inventory-window/a-shopping-cart-window/a-shopping-cart-items/a-shopping-cart-items.component.html:161:7 - error NG8001: 'mat-option' is not a known element:
1. If 'mat-option' is an Angular component, then verify that it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
161 <mat-option style="padding-top: 40px;padding-bottom: 4px; background-color: rgb(65, 64, 64);margin-top: -8px; border-radius: 10px;">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/mainwindow/a-inventory-window/a-shopping-cart-window/a-shopping-cart-items/a-shopping-cart-items.component.ts:17:16
17 templateUrl: './a-shopping-cart-items.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AShoppingCartItemsComponent.
请帮忙指出错误以及如何解决这个问题。