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

Question

目前，我有一个包含以下内容的角度组件 x.component.html（使用角度材料）：

<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看起来像这样的组件：

<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>
    ....

但是问题是，如果尝试在浏览器中访问它，则会收到以下错误消息（这仅是摘录）：

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文件：

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;
        }
      );
  }
}

如果我正确理解我在某种程度上/某些地方缺少mat-...标签的定义，但是我不知道需要在哪里放置哪种定义？有人可以启发我吗？

更新（1）： 安装了jquery并更改了.angular-cli.json文件后，错误消息已按预期进行更改，从而消除了JQuery问题，如下所示：

ncaught错误：模板解析错误：'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>

我还根据胡安的建议增加了进口。

更新（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像这样修复后：

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>

我又走了一步，得到了这个：

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';

Answer 2

安装jquery

npm install jquery

    "../node_modules/jquery/dist/jquery.min.js",

将此行添加到 angular-cli.json 中的“scripts”: [] 中

现在检查你的模块。

MatTableModule 并MatFormModule导入到您的模块中

更新

替换你的 xcomponent

  @Component({
      selector: 'x-component',
      styleUrls: ['x.component.css'],
      templateUrl: 'x.component.html',
       providers:[xService] // need to set provider
    })