Nie można powiązać z „dataSource”, ponieważ nie jest to znana właściwość „table”


86

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'.

wprowadź opis obrazu tutaj

Proszę pomóż.


4
To nie table, po prostu użyj<mat-table #table [dataSource]...>
błędy

1
próbowałem użyć tagu mat-table, ale błąd znika, ale nie widzę mojej tabeli w widoku.
Rahul Munjal

To właściwy sposób na użycie elementu, musisz mieć inne problemy gdzie indziej
błędy

Czy możesz podać działający przykład przy użyciu mat-tabletagu?
Rahul Munjal

8
Selektor, którego używasz, pochodzi z wersji 6, a masz zainstalowaną wersję 5. Powinieneś spojrzeć na przykłady w wersji 5 v5.material.angular.io/components/table/examples
Jota.Toledo

Odpowiedzi:


117

Pamiętaj, aby dodać MatTableModuleswój app.module's importsIE

W Angular 9+

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

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

Mniejszy niż kątowy 9

import { MatTableModule } from '@angular/material'  

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

4
Ten działa dla mnie, większość tutoriali używa tagu table, a nie tagu mat-table.
Phuah Yee Keat

1
To działa również dla mnie, gdy używasz paginacji, myślę, że musimy zrobić to samo
Aathil Ahamed

2
Musiałem zrobić to import { MatTableModule } from '@angular/material/table'; pracować
Chris Gunawardena

1
100% @WasiF, jeśli otrzymujesz nie można związać z materiałem kątowym, głównie dlatego, że moduł nie jest importowany. Powyższa odpowiedź ma moje 100% poparcie.
Theodore

41

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

imports: [
  MatSortModule,
  MatTableModule,
],

2
Korzystając z tego, mogę utworzyć składnik tabeli wielokrotnego użytku, który pobiera tablicę danych i tablicę columnNames. To znacznie lepsze rozwiązanie niż przykłady w material.angular.io
Janne Harju,

Próbowałem wykonać te same czynności, ale to nie pomaga.
Signcodeindie

@ Signcodeindie- Przepraszamy za tak późną odpowiedź, jaki błąd otrzymujesz?
Rahul Munjal

14
  • Angular Core v6.0.2,
  • Materiał kątowy, wersja 6.0.2,
  • Angular CLI v6.0.0 (globalnie v6.1.2)

Miałem ten problem podczas uruchamiania ng test, więc aby go naprawić, dodałem do mojego xyz.component.spec.tspliku:

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

I dodałem go do importssekcji w TestBed.configureTestingModule({}):

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
      declarations: [ BookComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));

Tutaj również testujemy odpowiedź. Rozwiązany dla Angular 7.
SushiGuy

10

jeśli "importujesz {MatTableModule} z '@ angular / material';" znajduje się w udostępnionym module, pamiętaj, aby go wyeksportować.

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

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

następnie w module niestandardowym, w którym definiujesz komponent korzystający z tabeli materiałów:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})

9

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”


4

Przykładem materiału jest użycie niewłaściwych tagów tabeli. Zmiana

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

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

do

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

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

1

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].


Dzięki za to! Miałem ten sam problem z konwerterem pug online z: html-to-pug.com , skopiowałem dane wejściowe [dataSource] i przekonwertowałem je na [datasource]
Jonathan002

0

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.


-1

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>


-3

Sprawdź, czy Twoje źródło danych nie pobiera danych z serwera lub źródło danych nie jest przypisane do oczekiwanego formatu danych.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.