How to get the return of a service inside an @component with angle 6

0

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

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

If you create a mapped array, it works. Below my component ( commented lines, they work, a struck array ):

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 with what returns from the service. How do I declare in this context dataSource , like I did in the cast example? Whenever I declare inside the code, where I get the service, from the error.

    
asked by anonymous 04.07.2018 / 22:40

2 answers

0

attempts 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">
    
05.07.2018 / 09:21
0

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

<table *ngIf="values" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    
06.07.2018 / 19:32