Question

我正在尝试在角度中使用表单。我正在使用官方文档制作一个简单的表格。

<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>
    <p>this works?</p>
  </div>


</div>

然而它给出了错误。如果我不使用<mat-form-field>，一切正常。我的main.component.ts文件是

import { Component, OnInit } from '@angular/core';
import { Bau_item } from '../shared/Bau_item';
import {MatFormFieldModule , MatTableDataSource} from '@angular/material';
//import {MatFormFieldModule} from '@angular/material/form-field';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
  // bau_items: Bau_item[]=[
  //    {
  //       id:1,
  //       industry:'industry',
  //       name_of_client: 'name_of_client',
  //       software_tested: 'software_tested',
  //       software_version: 'software_version',
  //       supported_business: 'supported_business',
  //       module_tested: 'module_tested',
  //       business_product_tested: 'business_product_tested'
  //   },
  //   {
  //      id:2,
  //      industry:'industry',
  //      name_of_client: 'name_of_client',
  //      software_tested: 'software_tested',
  //      software_version: 'software_version',
  //      supported_business: 'supported_business',
  //      module_tested: 'module_tested',
  //      business_product_tested: 'business_product_tested'
  //  }
  //
  // ]

  // displayedColumns = ['position', 'name', 'weight', 'symbol'];
  // dataSource = new MatTableDataSource(ELEMENT_DATA);
  //
  //   applyFilter(filterValue: string) {
  //     filterValue = filterValue.trim(); // Remove whitespace
  //     filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
  //     this.dataSource.filter = filterValue;
  //   }
  constructor() { }

  ngOnInit() {
  }
}

Chrome控制台中的错误是

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-container mat-elevation-z8">
  <div class="example-header">
    [ERROR ->]<mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"): ng:///AppModule/MainComponent.html@2:4
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

Answer 1

看起来发生了错误，因为您忘记导入所有必需的模块。在较新的Angular Material版本中，如果您要处理mat-form-field，则必须同时导入MatFormFieldModule和MatInputModule。我看，你忘了导入MatInputModule。

您必须将此模块导入模块，而不是导入组件，并将它们包含到imports数组中。

compiler.js：485未捕获错误：模板解析错误：＆＃39; mat-form-field＆＃39;不是一个已知的元素：

1 个答案: