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.