“ 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 ：

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问题，如下所示：

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之后：

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

Answer 2

安装jQuery

npm install jquery

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

将此行添加到“脚本”中：angular-cli.json中的[]

现在检查您的模块。

在模块中导入的MatTableModule和MatFormModule

更新资料

替换您的xcomponent

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

Answer 3

不能将jquery当作角材料的依赖项。 jQuery问题和角度mat-form-field问题是两个单独的问题。

似乎您安装了需要jquery的Bootstrap主题。 所以安装jquery npm install jquery --save

添加npm install --save-dev @types/jquery ： npm install --save-dev @types/jquery

并将脚本添加到angular-cli.json中：

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

要解决mat-form-field问题，您需要在app.module.ts中导入此模块：

import {MatInputModule} from '@angular/material/input';

...

@NgModule({
  ...,
  imports: [
    ...,
    MatInputModule,
    ...
  ],
  ...
})
export class AppModule { }

处理角形材料导入的一种便捷方法是为材料组件创建自定义模块： https : //medium.com/@armno/creating-a-custom-material-module-in-angular-ee6a5e925d30