This is my html with mat-table
<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.objectId}} </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>
See my component. Debugging in the browser, I get the values coming from the API, this is correct:
import { Component, OnInit } from '@angular/core';
import { OperatorService } from '../operator.service';
import { Operation, Itens } 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: Itens[];
constructor( private _operService: OperatorService)
{}
ngOnInit() {
this._operService
.getAll<Operation>()
.subscribe((data: Operation) => {
debugger;
this.dataSource = data.itens;
});
}
}
The fact is that I can not, in the variable oper in the html, I can not get the objectId nor the name. Below the operation and items class:
export class Operation{
error: boolean;
itens: Array<Itens>;
message: string;
}
export class Itens{
objectId: string;
name: string;
}
What's missing to make a table popular?
EDIT1
See that I have changed my html from objectId to operatorId, which is what returns in my json. See the Postman return of the API
"error": false,
"itens": [
[
{
"operatorId": "819ee9cc-70b6-44dc-b9e8-afff8705142c",
"name": "Paulo Correa"
},
{
"operatorId": "ccad3b40-c227-425e-b3b1-feedf6cfac2e",
"name": "Catarina Silva"
},
{
"operatorId": "68781a7b-ac4c-4a85-9f93-36dc5d65d1af",
"name": "José da Silva"
}
]
],
"message": ""
and so my componenents stayed
export class OperatorsComponent implements OnInit {
displayedColumns: string[] = ['codigo', 'nome'];
public message: string;
public dataSource: Itens[];
constructor( private _operService: OperatorService)
{}
ngOnInit() {
this._operService
.getAll<Operation>()
.subscribe((data: Operation) => {
debugger;
this.dataSource = data.itens;
});
}
}
and my new html
<div>
<table mat-table #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.operatorId}} </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>
If I put "dataSource | async" gives the commented error in the response of Gustavo Santos