ng: 'mat-table' 不是已知元素

Question

我正在尝试在 Angular 5 项目中使用 mat-table，但出现此错误。 我导入了MatTableModule 和它所需的一切，但仍然出现此错误：

ng: 'mat-table' 不是已知元素： 1. 如果 'mat-table' 是 Angular 组件，然后验证它是否是此模块的一部分。 2. 如果 'mat-table' 是一个 Web 组件，然后将 'CUSTOM_ELEMENTS_SCHEMA' 添加到 此组件的“@NgModule.schemas”以禁止显示此消息。

这是我的 admin.module.ts，它是我的组件的父模块：

import { AdminRoutingModule } from './admin-routing/admin-routing.module';
import { AdminControlSidebarComponent } from './admin-control-sidebar/admin-control-sidebar.component';
import { AdminFooterComponent } from './admin-footer/admin-footer.component';
import { AdminContentComponent } from './admin-content/admin-content.component';
import { AdminLeftSideComponent } from './admin-left-side/admin-left-side.component';
import { AdminHeaderComponent } from './admin-header/admin-header.component';
import { AdminComponent } from './admin.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { JobOfferComponent } from './Component/job-offer/job-offer.component';
import {HttpClientModule} from '@angular/common/http';
import {NgxSmartModalModule} from 'ngx-smart-modal';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {NotifierModule} from 'angular-notifier';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {OwlDateTimeModule, OwlNativeDateTimeModule} from 'ng-pick-datetime';
import {FilterPipeModule} from 'ngx-filter-pipe';
import {NgMultiSelectDropDownModule} from 'ng-multiselect-dropdown';
import { ApplicationPipe } from './pipes/application.pipe';
import {MatTabsModule} from '@angular/material';
import {TabModule} from 'angular-tabs-component';
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
import { ApplicationBackComponent } from './Component/job-offer/application-back/application-back.component';
import { JobOfferDetailsComponent } from './Component/job-offer/application-back/job-offer-details/job-offer-details.component';
import { TestComponent } from './Component/job-offer/application-back/test/test.component';
import { InterviewsComponent } from './Component/job-offer/application-back/interviews/interviews.component';
import { RequestComponent } from './Component/request/request.component';
import { DashboardComponent } from './Component/dashboard/dashboard.component';
import { ClientComponent } from './Component/client/client.component';
import { ProjectComponent } from './Component/project/project.component';
import { ResourcesComponent } from './Component/resources/resources.component';
import { MandatsComponent } from './Component/mandats/mandats.component';
import { SupportComponent } from './Component/support/support.component';
import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule,
  MatSortModule, MatTableModule } from '@angular/material';
@NgModule({
  imports: [
    CommonModule,
    AdminRoutingModule,
    HttpClientModule,
    NgxSmartModalModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    AngularMultiSelectModule,
    NgMultiSelectDropDownModule.forRoot(),
    NotifierModule,
    FilterPipeModule,
    MatTabsModule,
    BrowserAnimationsModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    MatInputModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatSortModule,
    MatTableModule],
  declarations: [
    AdminHeaderComponent,
    AdminLeftSideComponent,
    AdminContentComponent,
    AdminFooterComponent,
    AdminControlSidebarComponent,
    AdminComponent,
    JobOfferComponent,
    ApplicationBackComponent,
    JobOfferDetailsComponent,
    TestComponent,
    ApplicationPipe,
    InterviewsComponent,
    RequestComponent,
    DashboardComponent,
    ClientComponent,
    ProjectComponent,
    ResourcesComponent,
    MandatsComponent,
    SupportComponent
  ],
  exports: [
    AdminComponent,
    MatTabsModule,
    BrowserAnimationsModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    MatInputModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatSortModule,
    MatTableModule]
})
export class AdminModule { }

这是我的组件：

import { Component, OnInit } from '@angular/core';
import { RequestService } from '../../services/request.service';
import { HttpClient } from '@angular/common/http';
import {Request} from '../../models/Request';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import * as $ from 'jquery';
import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule,
  MatSortModule, MatTableModule } from '@angular/material';
import {MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-request',
  templateUrl: './request.component.html',
  styleUrls: ['./request.component.css'],
  providers : [RequestService]
})
export class RequestComponent implements OnInit {
  listRequests: Request[] = [];
  listData: MatTableDataSource<any>;
  columns: string[] = ['id', 'Project', 'Resource Type', 'Delivery Date', 'Status'];
  constructor(private httpClient: HttpClient) {}

  getAllRequests() {
    return this.httpClient.get<Request[]>('/map-web/map/User/getAllRequests').subscribe(data => {
      const res = data;
      for (let i = 0; i < res.length; i++) {
        this.listRequests.push(res[i]);
      }
      this.listData = new MatTableDataSource(this.listRequests);
    });
  }
  ngOnInit() {
    this.getAllRequests();
  }

}

请大家帮忙解决这个问题，紧急情况

Answer 1

使用 从“@angular/material/table”导入 {MatTableModule}； 在 AdminModule 和 RequestComponent 中。

Answer 2

我有类似的问题 - “垫表不是已知元素”。经过长时间搜索修复此错误后，解决我的错误的方法是在 app.module.ts 文件中同时导入 MatTableModule、MatTableDataSource。

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

@NgModule({ [
MatTableDataSource,
MatTableModule ],

在我的 component.ts 文件中，我导入了 MatTableDataSource 而不是简单的 MatTable。

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

我猜这个解释可能是因为您在 .html 文件中使用了 dataSource。

  <mat-table [dataSource]="dataArray" class="mat-elevation-z8" >

您可以在此链接上阅读更多内容：here