Jestem nowy w rozwoju Angular 5. Próbuję opracować tabelę danych z materiałem kątowym na przykładzie podanym tutaj: „ https://material.angular.io/components/table/examples ”.
Otrzymuję komunikat o błędzie Can't bind to 'dataSource' since it isn't a known property of 'table'.
Proszę pomóż.
angular
datatable
angular-material
Rahul Munjal
źródło
źródło
table
, po prostu użyj<mat-table #table [dataSource]...>
mat-table
tagu?Odpowiedzi:
Pamiętaj, aby dodać
MatTableModule
swójapp.module's imports
IEW Angular 9+
Mniejszy niż kątowy 9
źródło
import { MatTableModule } from '@angular/material/table';
pracowaćDzięki @ Jota.Toledo, mam rozwiązanie do tworzenia mojego stołu. Proszę znaleźć działający kod poniżej:
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
źródło
Miałem ten problem podczas uruchamiania
ng test
, więc aby go naprawić, dodałem do mojegoxyz.component.spec.ts
pliku:import { MatTableModule } from '@angular/material';
I dodałem go do
imports
sekcji wTestBed.configureTestingModule({})
:źródło
jeśli "importujesz {MatTableModule} z '@ angular / material';" znajduje się w udostępnionym module, pamiętaj, aby go wyeksportować.
sharedmodule.ts:
następnie w module niestandardowym, w którym definiujesz komponent korzystający z tabeli materiałów:
custommodule.ts:
źródło
Dla Angular 7
Sprawdź, gdzie znajduje się Twój komponent tabeli. W moim przypadku znajdował się on jak app / shared / tablecomponent, gdzie folder współdzielony zawiera wszystkie komponenty podrzędne, ale importowałem moduł materiału w Ngmodules z app.module.ts, co było niepoprawne. W tym przypadku moduł Material należy zaimportować do Ngmodules w shared.module.ts. I to działa.
NIE MA POTRZEBY zmieniać „stół” na „stół-mata” w kątowym 7.
Angular7 - Nie można powiązać z „dataSource”, ponieważ nie jest to znana właściwość „mat-table”
źródło
Przykładem materiału jest użycie niewłaściwych tagów tabeli. Zmiana
do
źródło
Przez długi czas łamałem sobie głowę tym komunikatem o błędzie, a później stwierdziłem, że używam [źródła danych] zamiast [źródła danych].
źródło
Problem polega na tym, że wersja materiału kątowego jest taka sama i rozwiązałem ten problem, gdy zainstalowałem lokalnie dobrą wersję materiału kątowego.
Mam nadzieję, że to też rozwiąże Twoje.
źródło
Pamiętaj, aby zaimportować moduł MatTableModule i usunąć element tabeli pokazany poniżej w celach informacyjnych.
błędna implementacja
<table mat-table [dataSource]=”myDataArray”> ... </table>
poprawna implementacja:
<mat-table [dataSource]="myDataArray"> </mat-table>
źródło
Sprawdź, czy Twoje źródło danych nie pobiera danych z serwera lub źródło danych nie jest przypisane do oczekiwanego formatu danych.
źródło