angular - No se puede vincular a ''dataSource'' ya que no es una propiedad conocida de ''table''

datatable angular-material

Question

Soy nuevo en el desarrollo angular 5. Estoy tratando de desarrollar una tabla de datos con material angular usando el ejemplo proporcionado aquí: " https://material.angular.io/components/table/examples ".

Recibo un error que dice Can''t bind to ''dataSource'' since it isn''t a known property of ''table''.

Por favor ayuda.

Answer 1

Consulte su dataSource varibale no obtiene los datos del servidor o dataSource no está asignado al formato de datos esperado.

Answer 2

El ejemplo material está usando las etiquetas de tabla incorrectas. Cambio

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

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

a

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

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

Answer 3

El problema es su versión de material angular, tengo el mismo, y lo resolví cuando instalé la buena versión de material angular en local.

Espero que resuelva el tuyo también.

Answer 4

Gracias a @ Jota.Toledo, obtuve la solución para la creación de mi tabla. Encuentre el código de trabajo a continuación:

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

Answer 5

Para angular 7

Verifique dónde se encuentra el componente de su tabla. En mi caso, estaba ubicado como app / shared / tablecomponent donde la carpeta compartida contiene todos los subcomponentes. Pero estaba importando el módulo de material en Ngmodules de app.module.ts, lo cual era incorrecto. En este caso, el módulo Material debe importarse en Ngmodules de shared.module.ts y funciona.

NO HAY NECESIDAD de cambiar ''table'' a ''mat-table'' en angular 7.

Angular7: no se puede vincular a ''dataSource'' ya que no es una propiedad conocida de ''mat-table''

Answer 6

Recuerde agregar MatTableModule en app.module''s imports su app.module''s imports es decir

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

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

Answer 7

Recuerde importar el módulo MatTableModule y eliminar el elemento de tabla que se muestra a continuación como referencia.
implementación incorrecta
<table mat-table [dataSource]=”myDataArray”> ... </table>
implementación correcta:
<mat-table [dataSource]="myDataArray"> </mat-table>

Answer 8

También me rompí la cabeza durante mucho tiempo con este mensaje de error y luego identifiqué que estaba usando [fuente de datos] en lugar de [fuente de datos].

Answer 9

si su "importación {MatTableModule} de ''@ angular / material'';" está en un módulo compartido, asegúrese de exportarlo.

sharedmodule.ts:

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

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

luego en su módulo personalizado donde define el componente que usa la tabla de materiales:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})

Answer 10

tienes que cambiar la etiqueta "tabla" a "tabla-mat".

Resolverá tu problema.

Answer 11

• Angular Core v6.0.2,
• Material angular, v6.0.2,
• Angular CLI v6.0.0 (globalmente v6.1.2)

Tuve este problema al ejecutar ng test , así que para solucionarlo, agregué a mi archivo xyz.component.spec.ts :

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

Y lo agregó a la sección de imports en TestBed.configureTestingModule({}) :

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