angularjs - 面临多个错误，如“mat-form-field”不是已知元素，会阻止网页加载
问题描述
我是 Angular 的新手，过去几天一直在学习它。
该应用程序包含以下内容：
App Module
---Layout Module
------ Customer Module (All Customer Component)
------ Table Module
客户模块和表格模块是功能模块。我已经从表格组件中导入了 html，并修改了细节以适应客户组件。但是当我在这个问题的末尾附加的页面加载时，我面临着多个错误消息。我不确定为什么 mat-form-field 或数据源等错误会导致错误并且我无法加载页面。我不确定为什么在 CustomerModule.ts 文件中导入 (MatFormFieldModule) 后会发生此错误。请让我知道我做错了什么？
每个模块和其他文件的代码
客户模块.ts：
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomerRoutingModule } from './customer-routing.module';
import { EditCustomerComponent } from '../Customer/edit-customer/edit-customer.component';
import { MatInputModule, MatTableModule, MatPaginatorModule, MatFormFieldModule } from '@angular/material';
import { AllCustomerComponent } from '../Customer/all-customer/all-customer.component';
@NgModule({
declarations: [ EditCustomerComponent, AllCustomerComponent],
imports: [
CommonModule,
CustomerRoutingModule,
MatTableModule,
MatFormFieldModule,
MatPaginatorModule,
MatInputModule
]
})
export class CustomerModule { }
所有客户组件.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { Customer } from 'src/app/Models/customer';
import { CustomerService } from '../Service/customer.service';
@Component({
selector: 'app-all-customer',
templateUrl: './all-customer.component.html',
styleUrls: ['./all-customer.component.scss']
})
export class AllCustomerComponent implements OnInit {
displayedColumns = ['Id', 'CustomerName', 'CustomerEmailID', 'CustomerPhNo'];
dataSource: MatTableDataSource<Customer>;
public customers: Customer[] = [];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private customerService: CustomerService) {
this.dataSource = new MatTableDataSource(this.customers);
}
ngOnInit() {
this.customerService.getGetAllCustomers().subscribe(data => {
this.dataSource = new MatTableDataSource(data);
});
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
AllCustomerComponent.html
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" />
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="Id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
<td mat-cell *matCellDef="let row">{{ row.Id }}</td>
</ng-container>
<ng-container matColumnDef="FirstName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{ row.FirstName }}</td>
</ng-container>
<ng-container matColumnDef="Email">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Email ID</th>
<td mat-cell *matCellDef="let row">{{ row.Email }}</td>
</ng-container>
<ng-container matColumnDef="PhoneNumber">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</th>
<td mat-cell *matCellDef="let row">{{ row.PhoneNumber }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
客户服务.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpErrorResponse } from
'@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry, map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { HttpHeaderService } from 'src/app/Services/http-header.service';
import { HandleError, HttpErrorHandlerService } from 'src/app/Services/http-
error-handler.service';
@Injectable({
providedIn: 'root'
})
export class CustomerService {
private baseUrl: string = environment.baseUrl + 'Customer/';
private handleError: HandleError;
constructor(
private http: HttpClient,
private httpHeaderService: HttpHeaderService,
private httpErrorHandlerService: HttpErrorHandlerService
) {
this.handleError =
httpErrorHandlerService.createHandleError('customerService');
}
getGetAllCustomers(): Observable<any> {
const url: string = this.baseUrl + 'GetAll';
return this.http.get<any>(url,
this.httpHeaderService.getHttpHeader()).pipe(
retry(environment.retryAttempt),
catchError(this.handleError('getGetAllCustomers', 'Error'))
);
}
}
来自浏览器的完整错误消息：
Uncaught Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part
of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA'
to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)"
placeholder="Filter" /"):
ng:///CustomerRoutingModule/AllCustomerComponent.html@0:0
Can't bind to 'dataSource' since it isn't a known property of 'table'. ("
<div class="mat-elevation-z8">
<table mat-table [ERROR ->][dataSource]="dataSource" matSort>
<ng-container matColumnDef="Id">
<th mat-header-cell *ma"):
ng:///CustomerRoutingModule/AllCustomerComponent.html@5:19
Can't bind to 'matHeaderRowDef' since it isn't a known property of 'tr'. ("
</ng-container>
<tr mat-header-row [ERROR ->]*matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColu"): ng:///CustomerRoutingModule/AllCustomerComponent.html@25:23
Property binding matHeaderRowDef not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
</ng-container>
[ERROR ->]<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; col"): ng:///CustomerRoutingModule/AllCustomerComponent.html@25:4
Can't bind to 'matRowDefColumns' since it isn't a known property of 'tr'. ("
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row [ERROR ->]*matRowDef="let row; columns: displayedColumns"></tr>
"): ng:///CustomerRoutingModule/AllCustomerComponent.html@26:16
Property binding matRowDefColumns not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
[ERROR ->]<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
"): ng:///CustomerRoutingModule/AllCustomerComponent.html@26:4
Can't bind to 'pageSize' since it isn't a known property of 'mat-paginator'.
1. If 'mat-paginator' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</table>
<mat-paginator [ERROR ->][pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
"): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:17
Can't bind to 'pageSizeOptions' since it isn't a known property of 'mat-paginator'.
1. If 'mat-paginator' is an Angular component and it has 'pageSizeOptions' input, then verify that it is part of this module.
2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</table>
<mat-paginator [pageSize]="10" [ERROR ->][pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
"): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:33
'mat-paginator' is not a known element:
1. If 'mat-paginator' is an Angular component, then verify that it is part of this module.
2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
"): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:2
at syntaxError (compiler.js:2427)
at
解决方案
我能够解决这个问题。似乎 Visual Studio Code 错误地添加了导入详细信息。
示例：文件路径为layout-> Customer-> EditCustomerComponent
import { EditCustomerComponent } from './customer/edit-customer/edit-customer.component';
Visual Studio 添加 -
import { EditCustomerComponent } from './Customer/Edit-customer/edit-customer.component';
Customer应该是customer 哪个有c小写字母的。更改后它开始工作。Visual Studio Code 往往会在多个场合这样做，我不得不手动修改它。我不确定我的设置是否有问题。
谢谢您的帮助 ：）
推荐阅读
- java - Spring中的LazyInitializationException（不经常抛出）
- python - 为日期范围内的每个值创建一个包含数组数据的 DataFrame
- python-3.x - 为什么诅咒中的窗口不更新？
- mysql - 如何获取不同的记录，但仅基于 MySQL 中的前 2 位数字
- python - 导入文件时出错：OSError: [WinError 126] The specified module could not be found
- javascript - 当事件侦听器中的计数器达到 0 时播放声音
- list - 使用 SwiftUI 和 macOS 创建带有标题的列表
- nlp - PyTorch - 稀疏张量没有步幅
- authorization - Identity Server 4 令牌过期 API 与 ClientApp
- python - 为什么要删除您更改数字的行中的第 8 个位置？