Impossible de se lier à 'dataSource' car ce n'est pas une propriété connue de 'table'

Je suis nouveau dans le développement angulaire 5. J'essaie de développer une table de données avec un matériau angulaire en utilisant l'exemple fourni ici: " https://material.angular.io/components/table/examples ".

Je reçois une erreur en disant Can't bind to 'dataSource' since it isn't a known property of 'table'.

Veuillez aider.

N'oubliez pas d'ajouter MatTableModulevotre app.module's importsie

Dans Angular 9+

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

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ]
})

Moins angulaire 9

import { MatTableModule } from '@angular/material'  

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ]
})

Merci à @ Jota.Toledo, j'ai eu la solution pour ma création de table. Veuillez trouver le code de travail ci-dessous:

component.html

<mat-table #table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}}</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element[column.id]}}</mat-cell>
  </ng-container>

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

component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/table';

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

  dataSource;
  displayedColumns = [];
  @ViewChild(MatSort) sort: MatSort;

  /**
   * Pre-defined columns list for user table
   */
  columnNames = [{
    id: 'position',
    value: 'No.',

  }, {
    id: 'name',
    value: 'Name',
  },
    {
      id: 'weight',
      value: 'Weight',
    },
    {
      id: 'symbol',
      value: 'Symbol',
    }];

  ngOnInit() {
    this.displayedColumns = this.columnNames.map(x => x.id);
    this.createTable();
  }

  createTable() {
    let tableArr: Element[] = [{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
      { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
      { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
    ];
    this.dataSource = new MatTableDataSource(tableArr);
    this.dataSource.sort = this.sort;
  }
}

export interface Element {
  position: number,
  name: string,
  weight: number,
  symbol: string
}

app.module.ts

imports: [
  MatSortModule,
  MatTableModule,
],

• Angular Core v6.0.2,
• Matériau angulaire, v6.0.2,
• CLI angulaire v6.0.0 (globalement v6.1.2)

J'ai eu ce problème lors de l'exécution ng test, donc pour le résoudre, j'ai ajouté à mon xyz.component.spec.tsfichier:

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

Et l'a ajouté à la importssection dans TestBed.configureTestingModule({}):

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
      declarations: [ BookComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));

si votre "import {MatTableModule} de '@ angular / material';" est sur un module partagé, assurez-vous de l'exporter.

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ],
  exports:[ MatTableModule ]
})

puis sur votre module personnalisé où vous définissez le composant utilisant la table des matières:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})

Pour Angular 7

Vérifiez où se trouve votre composant de table. Dans mon cas, il était situé comme app / shared / tablecomponent où le dossier partagé contient tous les sous-composants Mais j'importais un module de matériel dans Ngmodules de app.module.ts, ce qui était incorrect. Dans ce cas, le module Material doit être importé dans Ngmodules de shared.module.ts Et cela fonctionne.

Il n'y a PAS BESOIN de changer 'table' en 'mat-table' dans angulaire 7.

Angular7 - Impossible de se lier à 'dataSource' car ce n'est pas une propriété connue de 'mat-table'

L'exemple matériel utilise les mauvaises balises de table. Changement

<table mat-table></table>
<th mat-header-cell></th>
<td mat-cell></td>

<tr mat-header-row></tr>
<tr mat-row></tr>

à

<mat-table></mat-table>
<mat-header-cell></mat-header-cell>
<mat-cell></mat-cell>

<mat-header-row></<mat-header-row>
<mat-row></<mat-row>

Je me suis aussi cassé la tête pendant longtemps avec ce message d'erreur et plus tard j'ai identifié que j'utilisais [datasource] au lieu de [dataSource].

Le problème est votre version de matériau angulaire, j'ai la même chose, et je l'ai résolu lorsque j'ai installé la bonne version de matériau angulaire en local.

J'espère que cela résoudra le vôtre aussi.

N'oubliez pas d'importer le module MatTableModule et de supprimer l' élément de table ci-dessous pour référence.
mauvaise mise en
<table mat-table [dataSource]=”myDataArray”> ... </table>
œuvre mise en œuvre correcte:
<mat-table [dataSource]="myDataArray"> </mat-table>

Veuillez voir que votre variable dataSource n'obtient pas les données du serveur ou dataSource n'est pas affectée au format de données attendu.