I need to type an object, so I do not get any [] in the agile 6. Well, on the get, I get this from the API:
{
"error": false,
"itens": [
[
{
"operatorId": "819ee9cc-70b6-44dc-b9e8-afff8705142c",
"name": "Vera Silva"
},
{
"operatorId": "ccad3b40-c227-425e-b3b1-feedf6cfac2e",
"name": "Catarina Silva"
},
{
"operatorId": "68781a7b-ac4c-4a85-9f93-36dc5d65d1af",
"name": "José da Silva"
}
]
],
"message": ""
}
In my Component I rebooted so (getAll)
import { Component, OnInit } from '@angular/core';
import { Operator } from '../operator';
import { OperatorService } from '../operator.service';
export interface getOperator{
Id: string;
Name: string;
}
@Component({
selector: 'app-operators',
templateUrl: './operators.component.html',
styleUrls: ['./operators.component.css'],
providers: [OperatorService]
})
export class OperatorsComponent implements OnInit {
displayedColumns: string[] = ['codigo', 'nome'];
public message: string;
public dataSource: any[];
constructor
(
private _operService: OperatorService
)
{
//this.message = 'Hello from HomeComponent constructor';
}
ngOnInit() {
this._operService
.getAll<any[]>()
.subscribe((data: any[]) => {
debugger;
this.dataSource = data.itens
});
}
}
Notice that my dataSource receives an array of type any [] . This is causing my mat-table in my html not to be populated. My html
div>
<table mat-table [dataSource] = "dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="codigo">
<th mat-header-cell *matHeaderCellDef> Codigo </th>
<td mat-cell *matCellDef="let oper"> {{oper.Id}} </td>
</ng-container>
<ng-container matColumnDef="nome">
<th mat-header-cell *matHeaderCellDef> Nome </th>
<td mat-cell *matCellDef="let oper"> {{oper.Name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
The idea would be to type instead of passing any any [], but I do not know how I do it? I would create on the angular side a class like this: error, items, message ? and put it in the place of Any, type:
export class Item{
error: boolean;
itens: array de alguma coisa;
message: string;
}
Would that be?
EDIT1
Following the advice of colleague Gustavo Santos, I did the following:
export class Operation{
error: boolean;
itens: Array<Itens[]>;
message: string;
}
export class Itens{
objectId: string;
name: string;
}
But when installing on Component, it says [ts] Property 'does not exist on type' Operation [] ', exactly here:
debugger;
this.dataSource = data.itens;
My Component looks like this:
import { Component, OnInit } from '@angular/core';
import { Operator } from '../operator';
import { OperatorService } from '../operator.service';
import { Operation } from '../model/operators/operations';
export interface getOperator{
Id: string;
Name: string;
}
@Component({
selector: 'app-operators',
templateUrl: './operators.component.html',
styleUrls: ['./operators.component.css'],
providers: [OperatorService]
})
export class OperatorsComponent implements OnInit {
displayedColumns: string[] = ['codigo', 'nome'];
public message: string;
public dataSource: Operation[];
constructor
(
private _operService: OperatorService
)
{
}
ngOnInit() {
this._operService
.getAll<Operation[]>()
.subscribe((data: Operation[]) => {
debugger;
this.dataSource = data.itens;
});
}
}