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

Question

Je suis nouveau dans angulaire 5 de développement. Je suis en train de développer un tableau de données angulaire du matériel à l'aide de l'exemple fourni ici: "https://material.angular.io/components/table/examples".

Je reçois un message d'erreur indiquant Can't bind to 'dataSource' since it isn't a known property of 'table'.

S'il vous plaît aider.

Answer 1

N'oubliez pas d'ajouter MatTableModule dans votre app.module's imports ie

 import { MatTableModule } from '@angular/material'  

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

Answer 2

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: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    MatCardModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatSortModule,
    MatTableModule
  ],
 

Answer 3

• 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 de ng test , donc pour le résoudre, j'ai ajouté à mon fichier xyz.component.spec.ts :

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

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

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

Answer 4

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 qui utilise la table des matières:

custommodule.ts:

 @NgModule({
imports: [ sharedmodule ]     
})
 

Answer 5

Angulaire 7

De vérifier où en est votre composant de tableau situé. Dans mon cas, il était situé dans app/shared/tablecomponent où partagés dossier contient tous les sous-composants Mais j'ai été à l'importation de matières module dans Ngmodules de l'app.le module.ts ce qui était erroné. Dans ce cas, le Matériau module doit être importés dans Ngmodules de partage.le module.ts Et il fonctionne.

Il n'est PAS NÉCESSAIRE de changer de 'table' pour 'tapis de table" dans angulaire 7.

Angular7 - ne Peut pas se lier à 'dataSource', car il n'est pas connu de la propriété de "tapis-table"