I can’t get my mat-table popular

Question

This is my html with the 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>

Look at my Component. Debugging in the browser, I can get the values 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 cannot, in the variable Oper in html, I can’t get the objectId nor the name. Below the classes Operation and items:

export class Operation{
    error: boolean;
    itens: Array<Itens>;
    message: string;
}

export class Itens{
    objectId: string;
    name: string;
}

what to do to popular the table?

EDIT1

Note that I changed my html from objectId to operatorId, which is what returns in my json. See Postman the return of 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 remained my componenents

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 error commented on in the Gustavo Santos

Answer 1

I solved it. The API was spitting out the json wrong. There was, if you look, one Array inside another. The Colleague who made the API has already corrected and now is ok.