Ошибка использования MatTableDataBase в Angular "MatTableDataSource <unknown>"

Question

Ошибка: типу «MatTableDataSource» не хватает следующих свойств типа «Подписка»: закрыто, _parentOrParents, _subscription, отписаться и еще 2.

привет, у меня этоСледующая ошибка, которую я не знаю, с разрешаемым кто-нибудь может мне помочь?

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) { }

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

  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() {
    this.funcionarioSource = new MatTableDataSource();
    this.clientesSouce = new MatTableDataSource();
  }
}

funcionario.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) { }

  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');
  }
}

list-users.component.html

<mat-tab-group>
    <!-- Table Funcionario -->
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon">person</mat-icon>
        Funcionarios
      </ng-template>
      <div class="mat-elevation-z8">
        <table mat-table [dataSource]="funcionarioSource">

          <!-- ID Column -->
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef>ID</th>
            <td mat-cell *matCellDef="let funcionarios">{{ funcionarios.id }}</td>
          </ng-container>

          <!-- CardID Column -->
          <ng-container matColumnDef="cardID">
            <th mat-header-cell *matHeaderCellDef>Identiciador</th>
            <td mat-cell *matCellDef="let funcionarios">{{ funcionarios.cardID }}</td>
          </ng-container>

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

          <tr mat-header-row *matHeaderRowDef="columnsFuncionario"></tr>
          <tr mat-row *matRowDef="let row; columns: columnsFuncionario;"></tr>
        </table>
        <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
      </div>
    </mat-tab>

    <!-- Table Cliente -->

    <mat-tab>
      <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">person_outline</mat-icon>
        Clientes
      </ng-template>
      <div class="mat-elevation-z8">
        <table mat-table [dataSource]="clientesSouce">

          <!-- ID Column -->
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef>ID</th>
            <td mat-cell *matCellDef="let clientes">{{ clientes.id }}</td>
          </ng-container>

          <!-- CardID Column -->
          <ng-container matColumnDef="cardID">
            <th mat-header-cell *matHeaderCellDef>Identiciador</th>
            <td mat-cell *matCellDef="let clientes">{{ clientes.cardID }}</td>
          </ng-container>

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

          <!-- CPF Column -->

          <ng-container matColumnDef="cpf">
            <th mat-header-cell *matHeaderCellDef>CPF</th>
            <td mat-cell *matCellDef="let clientes">{{ clientes.cpf }}</td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="columnsClientes"></tr>
          <tr mat-row *matRowDef="let row; columns: columnsClientes;"></tr>
        </table>
        <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
      </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon">live_tv</mat-icon>
        LIVE
      </ng-template>
      Content 3
    </mat-tab>
  </mat-tab-group>

Answer 1

Попробуйте это:

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) { }

  columnsFuncionario: string[] = ['id', 'cardID', 'user'];
  columnsClientes: string[] = ['id', 'cardID', 'name', 'cpf'];
  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);
      }
    );
  }
}

Я думаю, что вы назначаете источник данных с разными типами данных.