mat-table it's not working in my project

pjavax commented 6 years ago

This is my html file:

<div>
  <table mat-table [dataSource] = "operator">

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </table>
</div>

**below my module(with imports)**

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { OperatorsComponent } from './operators/operators.component';

import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, 
         MatSortModule } from '@angular/material';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import {MatTableModule} from '@angular/material/table';

@NgModule({
  declarations: [
    AppComponent,
    OperatorsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule,
    DataSource,
    BehaviorSubject,
    Observable
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

my operator component

import { Component, OnInit } from '@angular/core';
import { Operator } from '../operator';

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css']
})
export class OperatorsComponent implements OnInit {

  operator: Operator = 
  {
    Id:'AAAAAAABBNNYYTT454545MNJ',
    Name: 'Paulo Silva',
    Version: '1.0.4.3'
  }
  constructor() { }
  ngOnInit() {
  }
}

when i run this app in the browser, i get this error:

OperatorsComponent.html:20 ERROR Error: Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError (table.es5.js:663) at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._observeRenderChanges (table.es5.js:1960) at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable.ngAfterContentChecked (table.es5.js:1381) at callProviderLifecycles (core.js:9355) at callElementProvidersLifecycles (core.js:9333) at callLifecycleHooksChildrenFirst (core.js:9323) at checkAndUpdateView (core.js:10254) at callViewAction (core.js:10491) at execComponentViewsAction (core.js:10433) at checkAndUpdateView (core.js:10256) View_OperatorsComponent_0 @ OperatorsComponent.html:20 proxyClass @ compiler.js:10058 push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:11105 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1670 (anonymous) @ core.js:4521 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3716 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4521 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent @ core.js:4548 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @ core.js:4490 (anonymous) @ core.js:4291 push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap @ core.js:4291 (anonymous) @ core.js:4257 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:3757 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 (anonymous) @ zone.js:872 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421 onInvokeTask @ core.js:3748 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188 drainMicroTaskQueue @ zone.js:595 Promise.then (async) scheduleMicroTask @ zone.js:578 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4286 ./src/main.ts @ main.ts:11 webpack_require @ bootstrap:76 0 @ main.ts:12 webpack_require @ bootstrap:76 checkDeferredModules @ bootstrap:43 webpackJsonpCallback @ bootstrap:30 (anonymous) @ main.js:1 OperatorsComponent.html:20 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 20, nodeDef: {…}, elDef: {…}, elView: {…}} View_OperatorsComponent_0 @ OperatorsComponent.html:20 proxyClass @ compiler.js:10058 push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:11105 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1675 (anonymous) @ core.js:4521 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3716 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4521 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent @ core.js:4548 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @ core.js:4490 (anonymous) @ core.js:4291 push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap @ core.js:4291 (anonymous) @ core.js:4257 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:3757 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 (anonymous) @ zone.js:872 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421 onInvokeTask @ core.js:3748 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188 drainMicroTaskQueue @ zone.js:595 Promise.then (async) scheduleMicroTask @ zone.js:578 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4286 ./src/main.ts @ main.ts:11 webpack_require @ bootstrap:76 0 @ main.ts:12 webpack_require @ bootstrap:76 checkDeferredModules @ bootstrap:43 webpackJsonpCallback @ bootstrap:30 (anonymous) @ main.js:1 core.js:3073 Angular is running in the development mode. Call enableProdMode() to enable the production mode. OperatorsComponent.html:20 ERROR Error: Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError (table.es5.js:663) at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._observeRenderChanges (table.es5.js:1960) at MatTable.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable.ngAfterContentChecked (table.es5.js:1381) at callProviderLifecycles (core.js:9355) at callElementProvidersLifecycles (core.js:9333) at callLifecycleHooksChildrenFirst (core.js:9323) at checkAndUpdateView (core.js:10254) at callViewAction (core.js:10491) at execComponentViewsAction (core.js:10433) at checkAndUpdateView (core.js:10256) View_OperatorsComponent_0 @ OperatorsComponent.html:20 proxyClass @ compiler.js:10058 push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:11105 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1670 (anonymous) @ core.js:4521 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3716 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4521 (anonymous) @ core.js:4406 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:3757 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3671 next @ core.js:4406 schedulerFn @ core.js:3488 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:195 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3480 checkStable @ core.js:3726 onHasTask @ core.js:3770 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441 push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461 push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async) scheduleMicroTask @ zone.js:578 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4286 ./src/main.ts @ main.ts:11 webpack_require @ bootstrap:76 0 @ main.ts:12 webpack_require_ @ bootstrap:76 checkDeferredModules @ bootstrap:43 webpackJsonpCallback @ bootstrap:30 (anonymous) @ main.js:1 OperatorsComponent.html:20 ERROR CONTEXT DebugContext {view: {…}, nodeIndex: 20, nodeDef: {…}, elDef: {…}, elView: {…}}

How can i solve this issue?

pjavax commented 6 years ago

I solved this way: my html file

<table mat-table [dataSource] = "operators">
      <ng-container matColumnDef="Codigo">
          <th mat-header-cell *matHeaderCellDef> Codigo </th>
          <td mat-cell *matCellDef="let oper"> {{oper.Id}} </td>
        </ng-container>

    <ng-container matColumnDef="Nome">
      <th mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let oper"> {{oper.Name}} </td>
    </ng-container>

    <ng-container matColumnDef="Versão">
      <th mat-header-cell *matHeaderCellDef> Versão </th>
      <td mat-cell *matCellDef="let oper"> {{oper.Version}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
  </table>

and my component file

import { Component, OnInit } from '@angular/core';
import { Operator } from '../operator';

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css']
})
export class OperatorsComponent implements OnInit {
  operator: Operator = 
  {
    Id:'AAAAAAABBNNYYTT454545MNJ',
    Name: 'Paulo Silva',
    Version: '1.0.4.3'
  };
  operators: Array<Operator> = 
  [
   {
      Id:'AAAAAAABBNNYYTT454545MNJ',
      Name: 'Paulo Silva',
      Version: '1.0.4.3'
    },
    {
      Id:'AAAAAAABBNNYYTT454545MNJ',
      Name: 'Augustus Caeser',
      Version: '1.0.4.3'
    },
   {
      Id:'AAAAAAABBNNYYTT454545MNJ',
      Name: 'Karl Marx',
      Version: '1.0.4.3'
    }
  ];
  columnsToDisplay = ['Codigo','Nome', 'Versão'];
  constructor() { }
  ngOnInit() {
  }
}

josephperrott commented 6 years ago

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / components

mat-table it's not working in my project #12043