How to catch the return of a service within a @Component with angular 6

Question

I made this table(omit the TR and TD’s).

<table mat-table [dataSource] = "dataSource" class="mat-elevation-z8">

If I create a failed array, it works. Below my component(commented lines, work, an array failed):

import { Component, OnInit } from '@angular/core';
import { Operator } from '../operator';
import { OperatorService } from '../operator.service';

import { ToasterService } from 'angular2-toaster/angular2-toaster';
//import { SlimLoadingBarService } from 'ng2-slim-loading-bar';

export interface getOperator{
  Id: string;
  Name: string;
  Version: string;
}

 //const ELEMENT_OPERATOR: getOperator[] = [
//   {Id: 'AAAAAAABBNNYYTT454545MNJ', Name:'Paulo Silva', Version: '1.0.4.3' },
//   {Id: 'AAAAAAABBNNYYTT454545MNJ', Name:'Augustus Caeser', Version: '1.0.4.3' },
//   {Id: 'AAAAAAABBNNYYTT454545MNJ', Name:'Karl Marx', Version: '1.0.4.3' },
//   {Id: 'AAAAAAABBNNYYTT454545MNJ', Name:'Fidel Castro', Version: '1.0.4.3' },
//   {Id: 'AAAAAAABBNNYYTT454545MNJ', Name:'Golda Meir', Version: '1.0.4.3' },
//   {Id: 'AAAAAAABBNNYYTT454545MNJ', Name:'Café Filho', Version: '1.0.4.3' }
 //];

@Component({
  selector: 'app-operators',
  templateUrl: './operators.component.html',
  styleUrls: ['./operators.component.css'],
  providers: [ToasterService, OperatorService]
})
export class OperatorsComponent implements OnInit {

   displayedColumns: string[] = ['codigo', 'nome', 'version'];
   //dataSource = ELEMENT_OPERATOR;

    public message: string;
    public values: any[];

    constructor
    (
        private _operService: OperatorService,
        private _toasterService: ToasterService
        //private _slimLoadingBarService: SlimLoadingBarService
    ) 
    {
        //this.message = 'Hello from HomeComponent constructor';
    }

  ngOnInit() {

    //this._slimLoadingBarService.start();

        this._operService
            .getAll<any[]>()
            .subscribe((data: any[]) => this.values = data,
            error => () => {
                this._toasterService.pop('error', 'Damn', 'Something went wrong...');
            },
            () => {
                this._toasterService.pop('success', 'Complete', 'Getting all values complete');
                //this._slimLoadingBarService.complete();
            });

       //dataSource = this._operService;       
  }    
}

In my html i must fill in what returns from the service. As I declare in this context datasource, how did I do in the failed example? Whenever I declare inside the code, where I pick up the service, error.

Answer 1

What happens is that your Component is rendered before the service returns the content, just use ngIf in your table, forcing to render it only when you have content.

<table *ngIf="values" mat-table [dataSource]="dataSource" class="mat-elevation-z8">

Answer 2

tries to initialize values as an empty array.

public values: any[] = [];

Tbm if datasource has to point to the right property

<table mat-table [dataSource] = "values" class="mat-elevation-z8">