I can not popular my mat-table

-3

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

    
asked by anonymous 06.07.2018 / 17:59

1 answer

0

I have resolved. The API was spitting the json wrongly. There was, if you looked, one Array inside another. Colleague who did the API already fixed and now it's ok.

    
11.07.2018 / 17:50