Невозможно связать с «источником данных», так как это не известное свойство «таблицы матов»

Question

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

ОШИБКА в src / app / dashboard / dashboard.component . html: 98: 13 - ошибка NG8001: «таблица матов» не является известным элементом: 1. Если «таблица матов» является компонентом Angular, то убедитесь, что он является частью этого модуля. 2. Если 'mat-table' является веб-компонентом, то добавьте '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' является компонентом Angular и имеет входные данные 'dataSource', убедитесь, что он является частью этого модуля.
2. Если 'mat-table' является веб-компонентом, добавьте ' CUSTOM_ELEMENTS_SCHEMA 'в' @ NgModule.schemas 'этого компонента, чтобы подавить это сообщение. 3. Чтобы разрешить любое свойство, добавьте «NO_ERRORS_SCHEMA» к «@ 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(){}
}

html файл:

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