Angular MatTableDataSource Error

Question

I got an error like this :

[ts] Argument of type 'Company' is not assignable to parameter of type 'Company[]'. Property 'includes' is missing in type 'Company'.

When I'd like to insert an Array Object into MatTableDataSource. This is my TypeScript file :

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { CompanyService } from '../../../services/company.service';
import { AuthService } from '../../../services/auth.service';
import { DataSource } from '@angular/cdk/collections';
import { Company } from '../../../models/company.model';
import { Observable } from "rxjs";
import { Router } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
  selector: 'app-index-company',
  templateUrl: './index-company.component.html',
  styleUrls: ['./index-company.component.css']
})

export class IndexCompanyComponent implements OnInit {
  company   : Object;
  companies : Object;
  displayedColumns = ['perusahaan', 'kategori', 'mahasiswa', 'option'];
  dataSource: MatTableDataSource<Company>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); 
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue; 
  }
  constructor(
    private companyService: CompanyService,
    private authService: AuthService,
    private router: Router
  )
  {
      this.companyService.getCompanies().subscribe(companies => {
      this.companies = companies;
      this.dataSource = new MatTableDataSource(companies);
    },
    err => {
      console.log(err);
      return false;
    });
  }

  ngOnInit() {
  }
}

And this is my Company models :

export class Company{
    perusahaan       : String;
    alamat           : String;
    deskripsi        : String;
    telepon          : String;
    email_perusahaan : String;
    website          : String;
    students         = [];
    kategori         : String;
    author           : String;
    update_by        : String;
    status           : String;
}

Edited. CompanyService addded :

  getCompanies(): Observable<Company>{
    let headers = new Headers();
    headers.append('Authorization', this.authToken);
    headers.append('Content-Type', 'application/json');
    return this.http.get(this.baseUri+'/companies', {headers: headers})
    .map(res => res.json());
  }

Cowper

It looks like you have a type error. try this companies : Array<Company>; – Ito

It looks like companyService.getCompanies() returns an array of companies, and yet MatTableDataSource<Company> requires a single company. You might want to set this to be MatTableDataSource<Company[]>. – Gregoor

After I tried, it just got same error on this.companies. I did MatTableDataSource<Company[]>, but still no change. – Cowper

When I try to console.log(companies), it returns an array with two objects inside like this : [{…}, {…}] – Cowper

I can't find anything wrong in your code right now. Does the error come when the page is loaded? is it when the service is called? do you have an idea of what line it could be? The error looks like there might be a possible typing error with your service, here is an example of how someone else solved it – Ito

The filter is working on my page, but it gives error on my terminal when I compile it. And I can't run ng build while the error still occur. – Cowper

Just this error make me can't do ng build. ERROR in src/app/admin/admin-companies/admin-companies.component.ts(49,48): error TS2345: Argument of type 'Company' is not assignable to parameter of type 'Company[]'. src/app/company/index-company/index-company.component.ts(42,48): error TS2345: Argument of type 'Company' is not assignable to parameter of type 'Company[]'. Property 'includes' is missing in type 'Company'. – Cowper

can you share your CompanyService code? – Kozloski

CompanyService has been added. To Vikas. – Cowper

This is odd. I have the same problem with Angular 8 + Material. I get the terminal error: XArray[]' is missing the following properties from type 'MatTableDataSource<unknown>'...BUT it works and builds. If I follow the Angular material notes and restore to getting the data direct (via a const) then the error goes away. – Wooten

Answer 1

TypeScript became more strict last months, so now solution is:

dataSource: MatTableDataSource<any[]> = new MatTableDataSource<any[]>([]);

Or you can disable --strictPropertyInitialization

Grimalkin

In my case changing it to following solved the issue: tableData: MatTableDataSource<ArrivalReportInterface> = new MatTableDataSource<ArrivalReportInterface>([]); – Lorraine

Yea it looks like you don't need to provide an array ([]) in the type when using MatTableDataSource. Assign to dataSource variable can work like: dataSource = new MatTableDataSource<Transactions>(data); Where the data variable is of type Transactions[]. – Pancreas

Answer 2

I have the similar problem before.
I solved the problem by setting

dataSource: MatTableDataSource<any[]>;

then

this.dataSource = new MatTableDataSource(companies);

Kathykathye

Answer 3

I fixed this error by adding /table at the end of the import:

import { MatTableDataSource } from '@angular/material/table';

Putative

Answer 4

Just declare your datasource like this:

dataSource = new MatTableDataSource(this.trainingService.getData());

@ViewChild(MatSort) sort: MatSort;
constructor(private trainingService: TrainingService) {}

then implement ngAfterViewInit witch is imported from @angular/core

ngAfterViewInit(){
  this.dataSource.sort = this.sort;
} 

Hope this helps

Nigger

Answer 5

Angular Material version 16.2 supports Observable so you don't need the async pipe

Lasso