Html table 在角度项目中创建mat表或cdk表时出错

Html table 在角度项目中创建mat表或cdk表时出错,html-table,datasource,mat-table,angular-cdk,angular10,Html Table,Datasource,Mat Table,Angular Cdk,Angular10,我想在我的角度应用中使用材质表。我查阅了正式的材料文件,以便使用该表。但我在这方面遇到了几个错误 这是我的部件代码: <div class="container"> <div class="header"> <span style="font-size: 20px;" >Manage <sub style="font-size: 12px;">Brands</

我想在我的角度应用中使用材质表。我查阅了正式的材料文件,以便使用该表。但我在这方面遇到了几个错误

这是我的部件代码

<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>

src/app/display/brands/brands.component.html:12:3中出现错误-错误NG8001:“cdk表”不是 已知元素: 1.如果“cdk表”是一个角度组件,则确认它是该模块的一部分。 2.如果“cdk table”是一个Web组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到的“@NgModule.schemas”中 此组件将禁止显示此消息。 12 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/display/brands/brands.component.ts:42:16 42 templateUrl:“./brands.component.html”~~~~~~~~~~~~~~~~~~~~~~~~~ 组件BrandsComponent的模板中出现错误。 src/app/display/brands/brands.component.html:12:14-错误NG8002:无法绑定到“数据源”,因为 它不是“cdk表”的已知属性。 1.如果“cdk表”是一个角度组件,并且它有“数据源”输入,那么请验证它是一部分 这是本单元的一部分。 2.如果“cdk table”是一个Web组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到的“@NgModule.schemas”中 此组件将禁止显示此消息。 3.若要允许任何属性,请将“无错误模式”添加到此组件的“@NgModule.schemas”。 12 ~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/display/brands/brands.component.ts:42:16 42 templateUrl:“./brands.component.html”~~~~~~~~~~~~~~~~~~~~~~~~~ 组件BrandsComponent的模板中出现错误。 我已经导入了所有必需的模块,并使用了最新的材质和角度版本。
我还是不明白。有谁能建议我如何消除这个错误吗?

请像下面这样导入matTableModule

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

请导入matTableModule,如下所示

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

AppModule是您项目的唯一模块吗?AppModule是您项目的唯一模块吗?
import { MatTableModule } from '@angular/material/table'