method Object.values () does not work on data source Angular Material

I'm using [Angular Material][1] in a project and need to collect information from a json-server API.

I created a property called clubes , it gets the values coming from ClubeService and returns me this way:

0: {...},
1: {id: 262, nome: "Flamengo", abreviacao: "FLA", posicao: 1, escudos: {60x60: ""}},

Checking in the examples of Angular Material to create table it needs the values in objects in const ELEMENT_DATA: Element[] , I'll leave here the component that I mounted, but the field does not even appear on the screen (only the commented example). I wanted to know where I'm going wrong and what direction to go?

import { Component, OnInit } from '@angular/core';

import { ClubeService } from './clube.service';

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

  constructor(private _clubeService: ClubeService) { }

  clubes: any;
  displayedColumns = ['id', 'nome', 'abreviacao', 'posicao', 'escudos'];
  dataSource = ELEMENT_DATA;

  ngOnInit() {
    this.loadClubes();
  }

  loadClubes() {
    this._clubeService.getClubes()
      .subscribe(clubes => {this.clubes = Object.values(clubes);
        console.log(this.clubes); // Mostra na tela os valores dos clubes requisitado pela API
      });
  }

}

export interface Element {
  id: number;
  nome: string;
  abreviacao: string;
  posicao: number;
  escudos: any;
}

const ELEMENT_DATA: Element[] = [
  //{id: 1, nome: 'Teste', abreviacao: 'Teste', posicao: 1, escudos: 'teste' },
  this.clubes
];