Error using Mattabledatabase in Angular

Question

Type 'Mattabledatasource' is Missing the following properties from type 'Subscription': closed, _parentOrParents, _subscriptions, unsubscribe, and 2 more.

I have this error in my code, when I run it in the browser no error it manages to bring people who are in the bank all right however it gets this error.

list-users.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ClienteService } from '../_services/cliente.service';
import { FuncionarioService } from '../_services/funcionario.service';

@Component({
  selector: 'app-list-users',
  templateUrl: './list-users.component.html',
  styleUrls: ['./list-users.component.scss']
})
export class ListUsersComponent implements OnInit {

  constructor(private fs: FuncionarioService, private cs: ClienteService) { }

  // CRIA AS COLUNAS

  columnsFuncionario: string[] = ['id', 'cardID', 'user'];
  columnsClientes: string[] = ['id', 'cardID', 'name', 'cpf'];

  // RESPONSAVEL POR PEGAR OS USUARIOS E LISTAR

  funcionarioSource = this.fs.getUser().subscribe(
    response => {
      this.funcionarioSource = response;
      console.log('Sucesso ao Importar!', this.funcionarioSource);
    },
    error => {
      console.log('Error ao Importar!', error);
    }
  );
  clientesSouce = this.cs.getUser().subscribe(
    response => {
      this.clientesSouce = response;
      console.log('Sucesso ao Importar!', this.clientesSouce);

    },
    error => {
      console.log('Error ao Importar!', error);
    }
  );

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {

    // PARTE QUEBRADA DO CÓDIGO

    this.funcionarioSource = new MatTableDataSource();
    this.clientesSouce = new MatTableDataSource();
  }
}

client.service.ts

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ClienteService {
  constructor(private http: HttpClient) { }

  // USA O PROTOCOLO HTTP PARA FAZER REQUISIÇÃO NO BANCO DE DADOS

  register(userData): Observable<any> {
    return this.http.post('http://127.0.0.1:8000/clientes/', userData);
  }

  getUser(): Observable<any> {
    return this.http.get<any[]>('http://127.0.0.1:8000/clientes/?format=json');
  }
}

employee.service.ts

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FuncionarioService {
  constructor(private http: HttpClient) { }

// USA O PROTOCOLO HTTP PARA FAZER REQUISIÇÃO NO BANCO DE DADOS

  register(userData): Observable<any> {
    return this.http.post('http://127.0.0.1:8000/funcionarios/', userData);
  }

  getUser(): Observable<any> {
    return this.http.get<any[]>('http://127.0.0.1:8000/funcionarios/?format=json');
  }
}

Answer 1

Hello, it seems to me that you are assigning the function variablesSource and clientsSee two types of data: no request is assigning an observable, and no ngInit to a Mattabledatasource. Try to do it this way:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ClienteService } from '../_services/cliente.service';
import { FuncionarioService } from '../_services/funcionario.service';

@Component({
  selector: 'app-list-users',
  templateUrl: './list-users.component.html',
  styleUrls: ['./list-users.component.scss']
})
export class ListUsersComponent implements OnInit {

  constructor(private fs: FuncionarioService, private cs: ClienteService) { }

  // CRIA AS COLUNAS

  columnsFuncionario: string[] = ['id', 'cardID', 'user'];
  columnsClientes: string[] = ['id', 'cardID', 'name', 'cpf'];

  // RESPONSAVEL POR PEGAR OS USUARIOS E LISTAR

  public funcionarioSource;
  public clientesSouce;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {
    this.fs.getUser().subscribe(
      response => {
        this.funcionarioSource = response;
        console.log('Sucesso ao Importar!', this.funcionarioSource);
      },
      error => {
        console.log('Error ao Importar!', error);
      }
    );
    this.cs.getUser().subscribe(
      response => {
        this.clientesSouce = response;
        console.log('Sucesso ao Importar!', this.clientesSouce);

      },
      error => {
        console.log('Error ao Importar!', error);
      }
    );
  }
}