javascript - “mat-form-field”不是已知元素

Question

目前我有一个 angular component 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 的建议添加了导入。

更新 (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

Answer 1

您需要在 app.module.ts 中导入以下内容:

import {MatInputModule} from '@angular/material/input';
import {MatTableModule} from '@angular/material/table';
import {FormsModule} from '@angular/forms';

在你的 x.component.ts 中:

import {MatTableDataSource} from '@angular/material';