Basic Angular Material table is showing test data, but not my data

Question

The table is showing the data it's supposed to when using a test object array, but not when using the actual object array that I need in the table, and I can't figure out what I'm missing!

This is the test array:

export interface TestData {
  compa: string;
  company: string;
}

const TEST_DATA: TestData[] = [
  {compa: 'blah', company: 'blahblahblah'},
  {compa: 'blah2', company: 's'},
  {compa: 'blah23', company: 's'},
  {compa: 'blah234', company: 's'},
  {compa: 'blah2345', company: 'fads'}
];

displayedColumns = ['company'];
dataSource = TEST_DATA;

... and when trying to display only the company, it is successful

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="company">
    <th mat-header-cell *matHeaderCellDef> Company </th>
    <td mat-cell *matCellDef="let site"> {{ site.company }} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

The 'sites' array is retrieved from a database and it's value is set OnInit:

sites: Site[] = [];

But this doesn't work:

displayedColumns = ['company'];
dataSource = this.sites;

... even though this.sites is also an object array with each object containing a field with the key 'company', just like the TEST_DATA array. I can even console.log(this.sites) and it returns the array, but when I set dataSource = this.sites, and then try to console.log(this.dataSource) it's empty... This is the code that gets data from back-end

  ngOnInit() {
    this.sitesService.getUtilitySites('Evansville');
    this.sitesSub = this.sitesService
      .getSiteUpdatedListener()
      .subscribe((siteData: {sites: Site[]}) => {
        this.sites = siteData.sites;
        this.sitesLoaded = true;
      });
    }

I'm baffled... please help

Answer 1

do it in NgOninit function

ngOnInit() {
this.sitesService.getUtilitySites('Evansville');
this.sitesSub = this.sitesService
  .getSiteUpdatedListener()
  .subscribe((siteData: {sites: Site[]}) => {
    this.sites = siteData.sites;
    this.dataSource = siteData.sites;
    this.sitesLoaded = true;
  });
}

and where is the code that it is getting from backend? if your subscribing make sure this code is in the subscribe