Question

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

ng：“ mat-table”不是已知元素：1.如果“ mat-table”是角组件，然后验证它是否属于此模块。 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

您需要在ngModule中定义架构。在你的@NgModule中写 “方案：[CUSTOM_ELEMENTS_SCHEMA]”

需要从角形芯库中导入它。

从'@ angular / core'导入{NgModule，CUSTOM_ELEMENTS_SCHEMA};

Answer 3

我遇到了类似的问题-“ mat table不是已知元素”。经过长时间的修复此错误的解决方案，解决了我的错误的方法是同时导入这两个-在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

ng：“ mat-table”不是已知元素

3 个答案: