Angular 6 and Angular Material Mat table dataSource Argument of type 'Object' is not assignable to parameter of type '{}[]'

Question

I am getting a list of users from a MySQL database to display it in <mat-table> using the dataSource property:

The following is the TypeScript method getUnitData(), where I am setting the dataSource value as the returned JSON array from PHP script:

export class RegistrationComponent implements OnInit {
  dataSource: MatTableDataSource<units>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  constructor(private auth: AuthApiService) { }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string){
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if(this.dataSource.paginator)
    {
      this.dataSource.paginator.firstPage();
    }
  }

  getUnitData(){
    this.auth.getUnitDataService().subscribe(
      (data)=>
      {
        this.dataSource = new MatTableDataSource(data);
      },
      (error)=>
      {

      }
    )
  }

}

And here is the main method from the AuthApiService:

getUnitDataService(){
    if(this.checkIsLogin){
      this.headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

      return this.http.get(this.globalVar.getUnitData,{
        headers: this.headerOptions
      });
    }
    else{
      this.router.navigate(['/login']);
    }
  }

The PHP script is:

public function getUnitData($conn)
{
    try{
        $sql = "SELECT * FROM unit ORDER BY unit_id DESC";
        $getData = $this->conn->prepare($sql);
        $getDataResult = $getData->execute();
        $getDataSize = $getDataResult->rowCount();
        $getDataResult->fetchAll();

        return $getDataResult;
    }
    catch(PDOException $e)
    {
        echo $e->getMessage();
    }
}

And then I am calling in another file using the following URL: this.globalVar.getUnitData.

The errors I am getting is as the following:

1.

[ts] Cannot find name 'units'.

2.

Argument of type 'Object' is not assignable to parameter of type 'any[]'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'length' is missing in type 'Object'.

I tried this solution on Stack Overflow, but still I get the same error.

nope, it didn't worked. No error, but nothing changed on the DOM — alim1990, Sep 03 '18 at 07:20

score 7 · Answer 1 · answered Dec 24 '18 at 15:24

7

I got the same problem and I solved it through this way:

new MatTableDataSource(<any> response);

answered Dec 24 '18 at 15:24

W Kenny

1,855
22
33

1

Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead. in angular8 – ShivarajRH Apr 24 '20 at 04:56
1

new MatTableDataSource( response as any); – ShivarajRH Apr 24 '20 at 04:56

score 2 · Answer 2 · answered Sep 03 '18 at 07:22

Have you tried to create new MatTableDataSource where dataSource var is initialized, MatPaginator and MatSort initialized in ngAfterViewInit and then in service method call this.dataSource.data = data

    export class RegistrationComponent implements OnInit {
     //  dataSource: MatTableDataSource<units>;
         dataSource = new MatTableDataSource<units>();

      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;
     constructor(private auth: AuthApiService) { }

      ngAfterViewInit() {
       // add ngAfterViewInit hook
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
      }

     ngOnInit() {

    }

   applyFilter(filterValue: string){
     this.dataSource.filter = filterValue.trim().toLowerCase();

    if(this.dataSource.paginator)
   {
    this.dataSource.paginator.firstPage();
   }
 }

 getUnitData(){
   this.auth.getUnitDataService().subscribe(
    (data)=>
   {
     //get data from service pass it to dataSouce.data Object
     this.dataSource.data = data;
   },
    (error)=>
    {

    }
    )
  }

 }

score 1 · Answer 3 · edited Dec 05 '21 at 17:09

First try to use an interface upper camel case name to differentiate your models and variables in another file, for example, UnitData.model.ts:

//Example
export interface UnitData {
  data: string;
   number: number;
   ...
}

Then import the model:

import { UnitData } from 'src/app/models/UnitData.model';

export class RegistrationComponent implements OnInit {

  units: UnitData[] = [];

  dataSource = new MatTableDataSource<UnitData>(this.units)

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  constructor(private auth: AuthApiService) { }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string){
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if(this.dataSource.paginator)
    {
      this.dataSource.paginator.firstPage();
    }
  }

  getUnitData(){
    this.auth.getUnitDataService().subscribe(
      (data)=>
      {
        this.dataSource.data = data;
      },
      (error)=>
      {

      }
    )
  }

}

score 0 · Answer 4 · answered Jun 22 '19 at 20:26

0

I had this same problem and solved it this way

report: any = new MatTableDataSource()

answered Jun 22 '19 at 20:26

kjohnsonthecoder

173
9

Angular 6 and Angular Material Mat table dataSource Argument of type 'Object' is not assignable to parameter of type '{}[]'

4 Answers4