1
I need to type an object, not to receive any[] in agular 6. Well, no 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 re-read 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 making my mat-table in my html is not 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 pass a any[], but don’t know how I do it? I would create on the Angular side a class like this: error, items, message? and put in Any’s place, like:
export class Item{
error: boolean;
itens: array de alguma coisa;
message: string;
}
that would be it?
EDIT1
Following the guidance 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 it was installed in Component, it says [ts] Property 'items' does not exist on type 'Operation[]', right here:
debugger;
this.dataSource = data.itens;
My Component is 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;
});
}
}
There are some things I haven’t picked up yet, for example. I create a folder called model and inside that other folder called Operators. Now inside the Operators folder I create these two classes. How does import in my Component?
– pnet
The import looks exactly like the others: import { Operation, Item } from 'the path to these classes'.
– Gustavo Santos
So I did it and it’s a mistake: import { Operation, Item} from '.. /model/Operators';. The mistake is: *Can’t find module '.. /model/Operators';. I’ve done with app in the front, with ./ or ../../ and yet it still goes wrong. How do I import?
– pnet
It lacked Operations which is the file containing the class. It worked
– pnet
That, have to inform the file name in the Imports as well, the ideal is to leave one class per file. : If your question has been answered, give the answer as right out of kindness. :)
– Gustavo Santos
I haven’t been able to test it yet, Gustavo. I’ve made an edition. Rest assured I’ll try it on.
– pnet
I did not populate the mat-table, but the question was another and by the question, is ok your answer. I will make another post
– pnet