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'.
Bitte helfen Sie.
angular
datatable
angular-material
Rahul Munjal
quelle
quelle
table
, nur verwenden<mat-table #table [dataSource]...>
mat-table
Tag geben?Antworten:
Denken Sie daran,
MatTableModule
in Ihremapp.module's imports
dh hinzuzufügenIn Angular 9+
Weniger als Winkel 9
quelle
import { MatTableModule } from '@angular/material/table';
zu arbeitenDank 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
quelle
Ich hatte dieses Problem beim Ausführen
ng test
. Um es zu beheben, habe ich meinerxyz.component.spec.ts
Datei Folgendes hinzugefügt :import { MatTableModule } from '@angular/material';
Und fügte es dem
imports
Abschnitt in hinzuTestBed.configureTestingModule({})
:quelle
wenn Sie "{MatTableModule} aus '@ angle / material' importieren;" Befindet sich ein freigegebenes Modul, stellen Sie sicher, dass Sie es exportieren.
sharedmodule.ts:
dann auf Ihrem benutzerdefinierten Modul, in dem Sie die Komponente definieren, die die Materialtabelle verwendet:
custommodule.ts:
quelle
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.
quelle
Das Materialbeispiel verwendet die falschen Tabellen-Tags. Veränderung
zu
quelle
Ich habe mir mit dieser Fehlermeldung auch lange den Kopf gebrochen und später festgestellt, dass ich [Datenquelle] anstelle von [Datenquelle] verwendet habe.
quelle
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.
quelle
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>
quelle
Bitte beachten Sie, dass Ihre dataSource varibale die Daten nicht vom Server erhält oder dataSource nicht dem erwarteten Datenformat zugewiesen ist.
quelle