Kann nicht an 'dataSource' gebunden werden, da es keine bekannte Eigenschaft von 'table' ist.

86

Ich bin neu in der Winkel 5-Entwicklung. Ich versuche, anhand des hier angegebenen Beispiels eine Datentabelle mit eckigem Material zu entwickeln: " https://material.angular.io/components/table/examples ".

Ich erhalte eine Fehlermeldung Can't bind to 'dataSource' since it isn't a known property of 'table'.

Geben Sie hier die Bildbeschreibung ein

Bitte helfen Sie.

Rahul Munjal
quelle
4
Es ist nicht table, nur verwenden<mat-table #table [dataSource]...>
Bugs
1
Wenn Sie versucht haben, das mat-table-Tag zu verwenden, verschwindet der Fehler, aber ich sehe meine Tabelle nicht in der Ansicht.
Rahul Munjal
Das ist der richtige Weg, um das Element zu verwenden, Sie müssen andere Probleme woanders haben
Fehler
Können Sie mir ein funktionierendes Beispiel mit mat-tableTag geben?
Rahul Munjal
8
Der von Ihnen verwendete Selektor stammt aus Version 6, und Sie haben Version 5 installiert. Sie sollten einen Blick auf die v5 Beispiele v5.material.angular.io/components/table/examples
Jota.Toledo

Antworten:

117

Denken Sie daran, MatTableModulein Ihrem app.module's importsdh hinzuzufügen

In Angular 9+

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

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

Weniger als Winkel 9

import { MatTableModule } from '@angular/material'  

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ]
})
WasiF
quelle
4
Dieser funktioniert für mich, die meisten Tutorials verwenden das Tabellen-Tag und nicht das Mat-Table-Tag.
Phuah Yee Keat
1
Dieser funktioniert auch für mich, wenn Sie die Paginierung verwenden, und wir müssen das Gleiche tun, denke ich
Aathil Ahamed
2
Ich musste es schaffen import { MatTableModule } from '@angular/material/table'; zu arbeiten
Chris Gunawardena
1
100% @WasiF Wenn Sie ein Modul erhalten, das nicht mit eckigem Material verbunden werden kann, liegt dies hauptsächlich daran, dass ein Modul nicht importiert wird. Die obige Antwort wird von mir zu 100% unterstützt.
Theodore
41

Dank an @ Jota.Toledo habe ich die Lösung für meine Tabellenerstellung bekommen. Den Arbeitscode finden Sie unten:

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,
],
Rahul Munjal
quelle
2
Auf diese Weise kann ich eine wiederverwendbare Tabellenkomponente erstellen, die ein Datenarray und ein Spaltennamenarray verwendet. Dies ist eine weitaus bessere Lösung als Beispiele in material.angular.io
Janne Harju
Versuchte die gleichen Schritte, hilft aber nicht.
Signcodeindie
@ Signcodeindie- Entschuldigung für die so späte Antwort. Welchen Fehler erhalten Sie?
Rahul Munjal
14
  • Angular Core v6.0.2,
  • Angular Material, v6.0.2,
  • Angular CLI v6.0.0 (global v6.1.2)

Ich hatte dieses Problem beim Ausführen ng test. Um es zu beheben, habe ich meiner xyz.component.spec.tsDatei Folgendes hinzugefügt :

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

Und fügte es dem importsAbschnitt in hinzu TestBed.configureTestingModule({}):

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
      declarations: [ BookComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));
Andrii Lundiak
quelle
Testen Sie hier auch die Antwort. Gelöst für Angular 7.
SushiGuy
10

wenn Sie "{MatTableModule} aus '@ angle / material' importieren;" Befindet sich ein freigegebenes Modul, stellen Sie sicher, dass Sie es exportieren.

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

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

dann auf Ihrem benutzerdefinierten Modul, in dem Sie die Komponente definieren, die die Materialtabelle verwendet:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})
The_Rub
quelle
9

Für Winkel 7

Überprüfen Sie, wo sich Ihre Tabellenkomponente befindet. In meinem Fall befand es sich wie app / shared / tablecomponent, wo der freigegebene Ordner alle Unterkomponenten enthält. Ich habe jedoch ein Materialmodul in Ngmodules von app.module.ts importiert, was nicht korrekt war. In diesem Fall sollte das Materialmodul in Ngmodules von shared.module.ts importiert werden. Und es funktioniert.

Es besteht keine Notwendigkeit, "Tabelle" in Winkel 7 in "Matten-Tabelle" zu ändern.

Angular7 - Kann nicht an 'dataSource' gebunden werden, da es keine bekannte Eigenschaft von 'mat-table' ist.

Sanchit
quelle
4

Das Materialbeispiel verwendet die falschen Tabellen-Tags. Veränderung

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

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

zu

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

<mat-header-row></<mat-header-row>
<mat-row></<mat-row>
itzhar
quelle
1

Ich habe mir mit dieser Fehlermeldung auch lange den Kopf gebrochen und später festgestellt, dass ich [Datenquelle] anstelle von [Datenquelle] verwendet habe.

Balasubramanian S.
quelle
Danke dafür! Ich hatte das gleiche Problem mit einem Mops-Konverter online von: html-to-pug.com , er kopierte die Eingabe [dataSource] und konvertierte sie in [Datenquelle]
Jonathan002
0

Das Problem ist Ihre Winkelmaterialversion, ich habe das gleiche, und ich habe dieses Problem behoben, als ich die gute Version des Winkelmaterials lokal installiert habe.

Hoffe, es löst auch deine.

Andresse Njeungoue
quelle
-1

Denken Sie daran, das MatTableModule-Modul zu importieren und das unten gezeigte Tabellenelement als Referenz zu entfernen .
falsche Implementierung
<table mat-table [dataSource]=”myDataArray”> ... </table>
richtige Implementierung:
<mat-table [dataSource]="myDataArray"> </mat-table>

Yogesh Aggarwal
quelle
-3

Bitte beachten Sie, dass Ihre dataSource varibale die Daten nicht vom Server erhält oder dataSource nicht dem erwarteten Datenformat zugewiesen ist.

Omkar Jadhav
quelle