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

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.

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
    // ...
  ]
})

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

• 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();
}));

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 ]     
})

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.

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>

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

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.

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>

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