1

Preciso tipar um objeto, para não receber o any[] no agular 6. Bem, no get, eu recebo isso da 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": ""
}

Na minha Component eu rebo assim(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
      });
  }
}

Observem que meu dataSource recebe um array do tipo any[]. Isso está fazendo com que minha mat-table no meu html não seja preenchida. Meu 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>

a idéia seria tipar ao invés de passar um any[], mas não sei como eu faço isso? Criaria no lado Angular uma classe assim: error, itens, message? e colocaria no lugar do Any, tipo:

export class Item{
error: boolean;
itens: array de alguma coisa;
message: string;
}

seria isso?

EDIT1

Seguindo a orientação do colega Gustavo Santos, fiz o seguinte:

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

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

mas ao instalar na Component, diz que [ts] Property 'itens' does not exist on type 'Operation[]', exatamente aqui:

debugger;
this.dataSource = data.itens;

Minha Component está assim:

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;
      });
  }
}

1 Resposta 1

3

O ideal é sempre tipar, você está no caminho certo, se seguir o seu JSON, você tem que ter essas classes:

export class Operation {
    error:   boolean;
    items:   Array<Item[]>;
    message: string;
}

export class Item {
    operatorId: string;
    name:       string;
}

E quando você der o this._operService.getAll(), substitui por:

this._operService.getAll<Operation>()
7
  • Tem algumas coisas que ainda não peguei, por exemplo. Eu crio uma pasta chamada model e dentro dessa outra pasta chamada operators. Agora dentro da pasta operators eu crio essas duas classes. Como fica o import em meu Component?
    – pnet
    6/07/2018 às 14:24
  • O import fica exatamente como os outros: import { Operation, Item } from 'o caminho onde estão essas classes'. 6/07/2018 às 14:40
  • Então, fiz isso e dá erro: import { Operation, Item} from '../model/operators';. O erro é: Can't find module '../model/operators';*. Já fiz com **app na frente, com ./ ou ../../ e mesmo assim continua com erros. Como faço esse import?
    – pnet
    6/07/2018 às 14:48
  • faltou o operations que é o arquivo que contem a classe. Funcionou
    – pnet
    6/07/2018 às 14:51
  • 1
    Ainda não consegui testar, Gustavo. Fiz uma edição. Fique tranquilo que marcarei asiim que testar.
    – pnet
    6/07/2018 às 15:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .