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

Question

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

ng: 'mat-table' is not a known element: 1. If 'mat-table' is an Angular component, 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.

这是我的 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

我有类似的问题 - "mat table is not a known element"。在长时间搜索此错误的修复程序后，解决我的错误的方法是在 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" >

您可以阅读更多相关内容link：here

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

ng: 'mat-table' is not a known element

angular-material

angular

mat-table