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'.
S'il vous plaît aider.
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
],
N'oubliez pas d'ajouter MatTableModule
dans votre app.module's imports
import { MatTableModule } from '@angular/material'
@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})
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();
}));
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'
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.
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>