Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular MatTableDataSource Error

Tags:

angular

mean

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());
  }
like image 206
Muhammad Fatih Rizqon Avatar asked May 11 '26 03:05

Muhammad Fatih Rizqon


2 Answers

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

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

Or you can disable --strictPropertyInitialization

like image 57
Archil Labadze Avatar answered May 14 '26 06:05

Archil Labadze


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

dataSource: MatTableDataSource<any[]>;

then

this.dataSource = new MatTableDataSource(companies);
like image 45
chifangjang Avatar answered May 14 '26 06:05

chifangjang