Angular Can'；t绑定到'；数据源'；因为它不是'；t'的已知属性；垫台'；

我试图使用角度材质的数据表，但当我执行代码时，发现错误显示：

src/app/dashboard/dashboard.component.html中出现错误：98:13-错误 NG8001:“mat table”不是已知元素： 1.如果“垫台”是一个角度组件，则确认它是该模块的一部分。 2.如果“mat table”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息

98 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/dashboard/dashboard.component.ts:14:16 14 templateUrl:“./dashboard.component.html”， ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件DashboardComponent的模板中出现错误。src/app/dashboard/dashboard.component.html:98:25-错误NG8002:无法 绑定到“dataSource”，因为它不是“mat table”的已知属性。 1.如果“mat table”是一个角度组件，并且有“dataSource”输入，则验证它是否是该模块的一部分。
2.如果“mat table”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。 3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”

98 ~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/dashboard/dashboard.component.ts:14:16 14 templateUrl:“./dashboard.component.html”， ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件DashboardComponent的模板中出现错误

我尝试更改app.module并导入所有必要的内容，但仍然是一样的

app.module：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { BlankTemplateComponent } from "./template/blank-template.component";
import { LeftNavTemplateComponent } from "./template/left-nav-template.component";
import { AppRoutingModule, routes } from "./app.routing";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";
import { HeaderComponent } from "./shared/header/header.component";
import { NavigationComponent } from "./shared/navigation/navigation.component";
import { CollectionService } from './collection.service';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableDataSource} from '@angular/material/table';
import { MatTableModule } from '@angular/material/table';
@NgModule({
  declarations: [
    AppComponent,
    BlankTemplateComponent,
    PageNotFoundComponent,
    HeaderComponent,
    LeftNavTemplateComponent,
    NavigationComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatTableModule,

    RouterModule.forRoot(routes, { useHash: true }),
    BrowserAnimationsModule
  ],
  providers: [CollectionService],
  bootstrap: [AppComponent]
})
export class AppModule {} 

组成部分：

import { Component, OnInit } from '@angular/core';
import {  Router } from '@angular/router';
import { MatTableDataSource } from '@angular/material/table';
import { CollectionService } from '../collection.service';
import { Collection_info } from '../modules/Collection_info';
import { User_info } from '../modules/User_info';
import { formatDate } from '@angular/common';
import { Observable } from 'rxjs/Observable'
import { DataSource } from '@angular/cdk/collections'
import {MatTableModule} from '@angular/material/table';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  Collection_info: Collection_info[];
  User_info: User_info[];

  dataSource = new User_infoDataSource(this.CollectionService);
  dispalyedColumns = ['Agent','cin','email','age','role'];
  constructor(private CollectionService: CollectionService, private router: Router) { }
User_info: User_info


  ngOnInit() {

    var index = 0;
    var bn_agent = document.getElementById("nb_total_agents");
    this.CollectionService.getagentsnb().subscribe((e)=>{
      console.log(e);
      bn_agent.textContent = e.toString();
    });
   /* this.CollectionService.getallCollections().subscribe((col)=>{
      console.log(col);
    });*/
    this.CollectionService.getCollections_email("mansor@gmail.com").subscribe((col=>{
      console.log(col);
    }));
    this.CollectionService.get1allCollections().subscribe(col=>{
      console.log(col); 
    });
    this.get_nbcol_vente();

  }

  get_nbcol_vente(){
    var Counter_Collections = 0,Counter_ventes = 0;
    var bn_col = document.getElementById("nb_total_col");
    var bn_vente = document.getElementById("nb_vente");
    var date = formatDate(new Date(), 'yyyy-MM-dd', 'en');
    var date1 =  new Date(date);;
    console.log('date: ' + date1);


    this.CollectionService.getallCollections().subscribe((data: Collection_info[])=>{
      this.Collection_info = data;
      console.log('data requested...');
      console.log(this.Collection_info);
      for(var i =0; i<this.Collection_info.length;i++){
        console.log(this.Collection_info[i].type);
        console.log(this.Collection_info[i].date_creation_col);

       // var date2 =  new Date(this.Collection_info[i].date_creation_col);;
        //console.log((date1.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24);
        if(this.Collection_info[i].type==='collection'){
          Counter_Collections++;
        }else{
          Counter_ventes++;
        } 
      }
      console.log('col: ' + Counter_Collections);
      console.log('vente: ' + Counter_ventes);
      bn_col.textContent = Counter_Collections.toString();
      bn_vente.textContent = Counter_ventes.toString();
    });
  }


}
export class User_infoDataSource extends DataSource<any>{
  constructor(private CollectionService: CollectionService){
  super();}
  connect(): Observable<User_info[]>{
    return this.CollectionService.getUsers();
  }
  disconnect(){}
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router}；
从“@angular/material/table”导入{MatTableDataSource}；
从“../collection.service”导入{CollectionService}；
从“../modules/Collection_info”导入{Collection_info}”；
从“../modules/User_info”导入{User_info}”；
从“@angular/common”导入{formatDate}；
从'rxjs/Observable'导入{Observable}
从“@angular/cdk/collections”导入{DataSource}
从“@angular/material/table”导入{MatTableModule}；
@组成部分({
选择器：“应用程序仪表板”，
templateUrl:“./dashboard.component.html”，
样式URL:['./dashboard.component.scss']
})
导出类DashboardComponent实现OnInit{
集合信息：集合信息[]；
用户信息：用户信息[]；
数据源=新用户信息数据源（this.CollectionService）；
dispalyedColumns=['Agent'、'cin'、'email'、'age'、'role']；
构造函数（私有CollectionService:CollectionService，私有路由器：路由器）{}
用户信息：用户信息
恩戈尼尼特（）{
var指数=0；
var bn_agent=document.getElementById（“nb_总代理”）；
this.CollectionService.getagentsnb（）.subscribe（（e）=>{
控制台日志（e）；
bn_agent.textContent=e.toString（）；
});
/*this.CollectionService.getallCollections（）.subscribe（（col）=>{
控制台日志（col）；
});*/
此.CollectionService.getCollections\u电子邮件（“mansor@gmail.com）订阅（（列=>{
控制台日志（col）；
}));
this.CollectionService.get1allCollections（）.subscribe（col=>{
控制台日志（col）；
});
这是我的梦想；
}
获取nbcol\u vente（）{
var计数器收集=0，计数器通风=0；
var bn_col=document.getElementById（“nb_total_col”）；
var bn_vente=document.getElementById（“nb_vente”）；
var date=formatDate（新日期（），'yyyy-MM-dd'，'en'）；
var date1=新日期（日期）；；
console.log（'date:'+date1）；
this.CollectionService.getallCollections（）.subscribe（（数据：Collection_info[]）=>{
this.Collection_info=数据；
log（'请求的数据…'）；
console.log（此.Collection\u信息）；
对于（var i=0；iMatTableModule已声明到AppModule中，但未在其中声明DashBoardComponent，因此DashBoardComponent不知道MatTableModule），请在DashBoardComponent模块中添加MatTableModule
<div>
            <mat-table  [dataSource]="dataSource">
                <ng-container matColumnDef = "Agent">
                    <mat-header-cell *matHeaderCellDef> agent </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.Fname}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "cin">
                    <mat-header-cell *matHeaderCellDef> CIN </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.CIN}} </mat-cell>

                </ng-container>
                    <ng-container matColumnDef = "email">
                    <mat-header-cell *matHeaderCellDef> E_mail </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.email}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "age">
                    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.age}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "role">
                    <mat-header-cell *matHeaderCellDef> Role </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.Role}} </mat-cell>

                </ng-container>
                <mat-header-row *matHeaderRowDef="dispalyedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: dispalyedColumns"></mat-row>
            </mat-table>
        </div>