ng: 'mat-table' не является известным элементом - PullRequest
0 голосов
/ 26 декабря 2018

Я пытаюсь использовать mat-table в проекте Angular 5, но у меня есть эта ошибка.Я импортировал MatTableModule и все необходимое для него, но все еще получаю эту ошибку:

ng: 'mat-table' не является известным элементом: 1. Если 'mat-table' является угловымкомпонент, затем убедитесь, что он является частью этого модуля.2. Если 'mat-table' является веб-компонентом, то добавьте '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();
  }

}

Любая помощь, пожалуйста, для решения этой проблемы, это чрезвычайная ситуация

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Вам необходимо определить схему в вашем ngModule.В вашем @NgModule напишите "схемы: [CUSTOM_ELEMENTS_SCHEMA]"

Необходимо импортировать его из базовой библиотеки angular.

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} из '@ angular /ядро ';

0 голосов
/ 26 декабря 2018

Использовать import {MatTableModule} из '@ angular / material / table';как в AdminModule, так и в RequestComponent.

...