Ошибка при создании таблицы mat или cdk в проекте Angular

Question

Я хочу использовать таблицу материалов в моем приложении angular. Я просмотрел официальную документацию материала, чтобы использовать таблицу. Но я столкнулся с несколькими ошибками в этом.

Это мой код компонента :

<div class="container">
<div class="header">
<span style="font-size: 20px;"
  >Manage <sub style="font-size: 12px;">Brands</sub></span
>
</div>
<hr style="margin: 10px 0;" />
<button class="btn btn-primary">Add Brand</button>
<br />
<hr />

<cdk-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container cdkColumnDef="position">
  <th cdk-header-cell *cdkHeaderCellDef> No. </th>
  <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
</ng-container>

<!-- Name Column -->
<ng-container cdkColumnDef="name">
  <th cdk-header-cell *cdkHeaderCellDef> Name </th>
  <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
</ng-container>

<!-- Weight Column -->
<ng-container cdkColumnDef="weight">
  <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
  <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
</ng-container>

<!-- Symbol Column -->
<ng-container cdkColumnDef="symbol">
  <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
  <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
</ng-container>

<cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
<cdk-row *cdkRowDef="let row; columns: displayedColumns;"></cdk-row>
</cdk-table>

</div>

Это моя папка импорта:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './header/header.component';

//======================================== material modules==========================

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatDividerModule } from '@angular/material/divider'
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { CdkTableModule } from '@angular/cdk/table';
import { DataSource } from '@angular/cdk/table'

// ==================================================================================

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LoginPageComponent } from './login-page/login-page.component';
import { ForgotPasswordPageComponent } from './forgot-password-page/forgot-password-page.component';
import { HomePageComponent } from './home-page/home-page.component';
import { DisplayModule } from './display/display-page.module'

@NgModule({
  declarations: [
  AppComponent,
  HeaderComponent,
  LoginPageComponent,
  ForgotPasswordPageComponent,
  HomePageComponent, 

  ],
 imports: [
  BrowserModule,    AppRoutingModule,    BrowserAnimationsModule,    MatButtonModule,
  MatIconModule,    MatToolbarModule,      
  MatInputModule,    MatFormFieldModule,    FormsModule,    ReactiveFormsModule,
  MatDividerModule,    MatCheckboxModule,    MatSidenavModule,    MatListModule,    
  DisplayModule,     CdkTableModule

  ],

 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

снимок экрана с ошибкой

 ERROR in src/app/display/brands/brands.component.html:12:3 - error NG8001: 'cdk-table' is not a 
 known element:
 1. If 'cdk-table' is an Angular component, then verify that it is part of this module.
 2. If 'cdk-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of 
 this component to suppress this message.

 12   <cdk-table [dataSource]="dataSource">
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/display/brands/brands.component.ts:42:16
 42   templateUrl: './brands.component.html',                      ~~~~~~~~~~~~~~~~~~~~~~~~~
 Error occurs in the template of component BrandsComponent.
 src/app/display/brands/brands.component.html:12:14 - error NG8002: Can't bind to 'dataSource' since 
 it isn't a known property of 'cdk-table'.
 1. If 'cdk-table' is an Angular component and it has 'dataSource' input, then verify that it is part 
 of this module.
 2. If 'cdk-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of 
 this component to suppress this message.
 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

 12   <cdk-table [dataSource]="dataSource">
            ~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/display/brands/brands.component.ts:42:16
 42   templateUrl: './brands.component.html',                      ~~~~~~~~~~~~~~~~~~~~~~~~~
 Error occurs in the template of component BrandsComponent.

Я уже импортировал все необходимые модули и использовал последний материал и angular версии. Я все еще не могу этого понять. Может ли кто-нибудь подсказать мне, как избавиться от этой ошибки?

Answer 1

Импортируйте matTableModule, как показано ниже.

import { MatTableModule } from '@angular/material/table'