webentwicklung-frage-antwort-db.com.de

Kann nicht an 'dataSource' binden, da es keine bekannte Eigenschaft von 'table' ist

Ich bin neu in der Entwicklung von Winkel 5. Ich versuche, eine Datentabelle mit eckigem Material zu entwickeln, und zwar anhand des folgenden Beispiels: " https://material.angular.io/components/table/examples ".

Ich erhalte eine Fehlermeldung, die Can't bind to 'dataSource' since it isn't a known property of 'table'. sagt

 enter image description here

Bitte helfen.

angulardatatableangular-material
20
Rahul Munjal

Danke an @ Jota.Toledo, ich habe die Lösung für meine Tabellenerstellung bekommen. __ Hier finden Sie den Arbeitscode:

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
  ],
24
Rahul Munjal

Denken Sie daran, MatTableModule in Ihrem app.module's imports hinzuzufügen.

import { MatTableModule } from '@angular/material'  

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ]
})
17
WasiF
  • Angular Core v6.0.2, 
  • Winkelmaterial, v6.0.2, 
  • Angular CLI v6.0.0 (global v6.1.2)

Ich hatte dieses Problem beim Ausführen von ng test. Um dies zu beheben, habe ich meine xyz.component.spec.ts-Datei hinzugefügt:

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

Und fügte es zu imports in TestBed.configureTestingModule({}) hinzu:

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

wenn Sie {MatTableModule} aus '@ angle/material' importieren; " Wenn Sie sich auf einem gemeinsam genutzten Modul befinden, stellen Sie sicher, dass Sie es exportieren.

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

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

anschließend definieren Sie in Ihrem benutzerdefinierten Modul die Komponente, die die Materialtabelle verwendet:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})
4
The_Rub

Für Winkel 7

Prüfen Sie, wo sich Ihre Tabellenkomponente befindet. In meinem Fall befand es sich wie app/shared/tablecomponent .__, wobei der freigegebene Ordner alle Unterkomponenten enthält Ich importierte jedoch Materialmodule in Ngmodules von app.module.ts, was falsch war. In diesem Fall sollte das Material-Modul in Ngmodules von shared.module.ts Importiert werden. Und es funktioniert. 

Es besteht keine Notwendigkeit, in Winkel 7 "Tisch" in "Matten-Tisch" zu ändern.

Angular7 - Kann nicht an 'dataSource' binden, da es keine bekannte Eigenschaft von 'mat-table' ist

2
Sanchit

Das Problem ist Ihre Winkelmaterialversion. Ich habe das gleiche und ich habe dieses Problem gelöst, wenn ich die gute Version des Winkelmaterials in Local installiert habe.

Ich hoffe es löst auch Ihre.

0
Andresse Geo

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

0
Balasubramanian S

Materialbeispiel verwendet die falschen Tabellen-Tags . Ändern

<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>
0
itzhar