目前我有一个Angular组件x.component.html，其中包含以下内容（使用Angular Material ）：
<div class="example-container mat-elevation-z8">
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="farbeKey">
<mat-header-cell *matHeaderCellDef> farbeKey </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.farbeKey}} </mat-cell>
</ng-container>
....
此外，我有一个组件
x.component.ts，它看起来像这样：import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';
import { User } from '../models/user.model';
import { OrgtService } from './orgt.service';
@Component({
selector: 'x-component',
styleUrls: ['x.component.css'],
templateUrl: 'x.component.html',
})
export class XComponent implements OnInit {
users: User[] = []
constructor(private xService: XService) {
}
displayedColumns = ['c1', 'c2', 'c3', 'c4'];
dataSource = new MatTableDataSource(this.users);
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
public ngOnInit() {
this.xService.getUsers()
.subscribe(
(users) => {
this.users = users;
}
);
}
}
但问题在于，如果我尝试在浏览器中访问它，我会得到以下错误消息（这只是一个摘录）：
Uncaught Error: Bootstrap's JavaScript requires jQuery
at scripts.bundle.js:8
(anonymous) @ scripts.bundle.js:8
compiler.js:485 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. ("
<div class="example-header">
[ERROR ->]<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"): ng:///AppModule/OrgtComponent.html@3:4
Can't bind to 'dataSource' since it isn't a known property of 'mat-table'.
1. If 'mat-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'mat-table' 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. ("
</div>
这是我的package.json文件:
{
"name": "portal-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.2.2",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.2.2",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.6.3",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
如果我正确理解，我在某处/某地方缺少了
mat-...标签的定义，但我不知道哪里需要放置什么类型的定义。有人能给我一点启示吗？更新（1）：安装jquery并更改.angular-cli.json文件后，错误消息已按预期更改以删除JQuery问题，如下所示：
未捕获错误：模板解析错误： 'mat-form-field'不是已知元素： 1.如果'mat-form-field'是Angular组件，请确保它是该模块的一部分。 2.如果'mat-form-field'是Web组件，请将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@NgModule.schemas'中，以抑制此消息。（“
<div class="example-header">
[ERROR ->]<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"): ng:///AppModule/OrgtComponent.html@3:4
Can't bind to 'dataSource' since it isn't a known property of 'mat-table'.
1. If 'mat-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'mat-table' 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. ("
</div>
我已根据Juan的建议添加了imports。
更新（2）： 在整合每个答案后，我的应用程序可以启动和编译而不会出现任何问题。 现在我得到了以下信息:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'x'
Error: Cannot match any routes. URL Segment: 'x'
更新（3）：
所以在像这样修复app.routing.module.ts之后：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
import {AddUserComponent} from './user/add-user.component';
import { XComponent} from './x/x.component';
const routes: Routes = [
{ path: 'users', component: UserComponent },
{ path: 'add', component: AddUserComponent },
{ path: 'x', component: XComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
我做了更进一步的工作，得到了以下结果：
ERROR Error: Uncaught (in promise): Error: StaticInjectorError[XService]:
StaticInjectorError[XService]:
NullInjectorError: No provider for XService!
Error: StaticInjectorError[XService]:
StaticInjectorError[XService]:
NullInjectorError: No provider for XService