web-dev-qa-db-fra.com

Impossible de se connecter à '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'.

 enter image description here

S'il vous plaît aider.

angulardatatableangular-material
20
Rahul Munjal

Merci à @ Jota.Toledo, j'ai la solution pour la création de ma 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
  ],
24
Rahul Munjal

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

import { MatTableModule } from '@angular/material'  

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ]
})
17
WasiF
  • Noyau angulaire 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, alors 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();
}));
6
Andrii Lundiak

Pour angulaire 7

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

Il n'est pas nécessaire de changer 'table' en 'mat-table' dans l'angle 7.

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

2
Sanchit

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

J'espère que ça résoudra le tien aussi.

0
Andresse Geo

L’exemple matériel utilise les mauvaises balises de tableau . Changer

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