Question

我在创建表时遇到问题。
HTML中的错误：
“ mat-table”不是已知元素：
1.如果“ mat-table”是一个Angular组件，则确认它是该模块的一部分。 2.如果“ mat-table”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。”

仅搜索了解决方案，但是任何他们帮助了。也许您可以检查我的代码。我不知道怎么了我的angular / modules版本是8。

events.component.html：

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

  <ng-container matColumnDef="seqNo">
      <div *matHeaderCellDef>#</div>
      <div *matCellDef="let lesson">{{lesson.seqNo}}</div>
  </ng-container>

  <ng-container matColumnDef="description">
      <div *matHeaderCellDef>Description</div>
      <div class="description-cell"
                *matCellDef="let lesson">{{lesson.description}}</div>
  </ng-container>

  <ng-container matColumnDef="duration">
      <div *matHeaderCellDef>Duration</div>
      <div class="duration-cell"
                *matCellDef="let lesson">{{lesson.duration}}</div>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

</mat-table>

events.compontent.ts：

import { Component, OnInit } from '@angular/core';
import { EventService } from 'src/app/event.service';
import { HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';
import { MatTableDataSource } from '@angular/material';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from "@angular/material/paginator";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatSortModule } from "@angular/material/sort";
import {MatTableModule} from '@angular/material';

@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {

  listData: MatTableDataSource<any>;
  displayColumns: string[] = ['fullname']

  events = []
  constructor(private _eventService: EventService,
     private _router: Router) { }

  ngOnInit() {
    this._eventService.getEvents2()
    .subscribe(
      res => this.events = res.events,
      err => {
        if (err instanceof HttpErrorResponse)
        {
          if(err.status === 401)
          {
            this._router.navigate(['service/login'])
          }
        }
      }
    )
  }
}

shared.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ColumnOneComponent } from './layouts/column-one/column-one.component';
import { ServiceComponent } from './service.component';
import { NavbarComponent } from './layouts/navbar/navbar.component';
import { LoginPageComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
import { AppRoutingModule } from '../app-routing.module';
import { FormsModule } from '@angular/forms';
import { EventsComponent } from './components/events/events.component';
import { AddUserComponent } from './components/add-user/add-user.component';
import { FlashMessagesModule, FlashMessagesService } from 'angular2-flash-messages';
import { MatTableModule } from '@angular/material/table';
import { MatTableDataSource } from '@angular/material';
import { MatInputModule } from "@angular/material";
import { MatPaginatorModule } from "@angular/material";
import { MatProgressSpinnerModule } from "@angular/material";
import { MatSortModule } from "@angular/material";


@NgModule({
  declarations: [
    ServiceComponent,
    NavbarComponent,
    ColumnOneComponent,
    LoginPageComponent,
    RegisterComponent,
    ResetPasswordComponent,
    EventsComponent,
    AddUserComponent,
  ],
  imports: [
    FormsModule,
    CommonModule,
    AppRoutingModule,
    FlashMessagesModule,
    MatTableModule,
    MatTableDataSource,
    MatInputModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule,
  ],
  providers: [FlashMessagesService],
  exports: [ColumnOneComponent, ServiceComponent, NavbarComponent, LoginPageComponent, RegisterComponent]
})
export class SharedModule { }

该应用程序应从此module.ts导入，但如果我也将导入也添加到app.module.ts中。 app.module.ts：

import { BrowserModule, Title} from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './service/shared.module';
import { MainPageComponent } from './main/main.component';
import { AuthService } from './auth.service';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { EventService } from './event.service';
import { AuthGuard } from './auth.guard';
import { TokenInterceptorService } from './token-interceptor.service';
import { MatTableModule } from "@angular/material/table";
import { MatTableDataSource } from "@angular/material";
import { MatInputModule } from "@angular/material";
import { MatPaginatorModule } from "@angular/material";
import { MatProgressSpinnerModule } from "@angular/material";
import { MatSortModule } from "@angular/material";

@NgModule({
  declarations: [
    AppComponent,
    MainPageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    SharedModule,
    HttpClientModule,
    MatTableModule,
    MatTableDataSource,
    MatInputModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule,
    ],
  providers: [
    Title, AuthService, EventService, AuthGuard,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

角问题“垫子表”不是已知元素

0 个答案: