-2

Estou percorrendo uma lista de usuarios para mostrar seus dados no html. Na minha ultima linha, onde faço "{{ usuario.cartao | json }}" Trago uma lista de objetos que contém o cartão(ou varios cartões) de cada usuário, essa lista de objetos dos cartões trazem varios dados, como o id do cartão, o numero, nome, tipo de cartão... Porém, eu gostaria que me retornasse, apenas o tipo de cartão(tipoCartao). Como faço para alterar esse html(ou n proprio ts) para que esse trecho do código me retorne apenas o tipo de cartão?

Trecho do código html do usuario:

<tbody>
      <tr *ngFor="let usuario of usuarios">
        <td> {{ usuario.id }} </td>
        <td> {{ usuario.nome }} </td>
        <td> {{ usuario.email }} </td>
        <td> {{ usuario.cartao | json }} </td>
      </tr>
 </tbody>

usuario.component.ts:

import { UsuarioService } from './../services/usuario.service';
import { Component, OnInit } from '@angular/core';
import { UsuarioModel } from '../usuario';

@Component({
  selector: 'app-usuario',
  templateUrl: './usuario.component.html',
  styleUrls: ['./usuario.component.css']
})
export class UsuarioComponent implements OnInit {
  usuarios!: UsuarioModel[];

  constructor(private usuarioService: UsuarioService) { }

  ngOnInit(): void {
    this.getUsuario();
  }

  private getUsuario() {
    this.usuarioService.getUsuario().subscribe(data => {
      this.usuarios = data;
    })
  }
}

minha interface de usuario:

export interface UsuarioModel {
  id: number;
  nome: string;
  email: string;
  senha: string;
  cartao: [];
}

minha interface do cartão:

import { UsuarioModel } from './usuario';
export interface CartaoModel {
  id: number;
  numeroCartao: number;
  nome: string;
  status: boolean;
  tipoCartao: string;
  usuario: UsuarioModel;
}

é assim que ta mostrando no momento: A intenção é só mostrar o tipo de cartao nessa telas

Sem mostrar os outros itens

5
  • O tipo do cartão é uma propriedade? Já tentou {{ usuario.cartao.tipo }}?
    – bruno101
    27/01/2023 às 13:13
  • Não da. Quando faço "usuario.cartao" o cartao ja é uma lista que contém os objetos do cartão. Só que da mesma forma que tenho o component de usuario, tenho o componente do cartão, que aí sim, tem o tipoCartao 27/01/2023 às 14:13
  • Então talvez seja o caso de apenas pegar o índice 0 (zero) dessa coleção, sugiro colocar um exemplo de código do que vem do cartão (sem os dados reais, claro), assim facilita para entender qual é a estrutura e o problema em si.
    – bruno101
    27/01/2023 às 15:09
  • Pronto, adicionei 27/01/2023 às 16:59
  • Desculpa a demora, eu pensei que alguém já havia te respondido, mas acabei vendo que não, então segue uma resposta, caso ela te atenda, peço que avalie ela como positiva.
    – bruno101
    7/02/2023 às 18:14

1 Resposta 1

0

Vendo o teu código, um usuário pode ter vários cartões, uma lista de cartão que será exibida apenas o tipo dele.

Pra resolver esse problema é necessário primeiro que tu faça um *ngFor por todos os cartões do usuário pegando apenas a propriedade tipoCartao, que é a que tu deseja e fazer uma interação nela da seguinte forma:

Aqui tenho o meu usuário ficticio:

usuario = {
    nome: 'Testerino',
    cartoes: [
      { id: 1, tipoCartao: 'credito' },
      { id: 2, tipoCartao: 'debito' },
      { id: 3, tipoCartao: 'VR' },
    ],
  };

E o seguinte código para listar os dados do cartão:

<ul>
  <li *ngFor="let cartao of usuario.cartoes"> 
    {{ cartao.tipoCartao }}
  </li>
</ul>

A saída será:

  • credito
  • debito
  • VR

Neste meu exemplo eu tenho uma lista contendo os tipos de cartões do usuário.

Caso queira que todos eles apareçam em uma linha, talvez seja melhor fazer essa processo no TJ e então retorna-lo já pronto para o front, por exemplo:

cartoes = this.usuario.cartoes.map(x => x.tipoCartao).join().replace(',', ', ');

Neste caso o resultado será uma string que será apresentada da seguinte forma:

{{ cartoes }}

E a saída será:

credito, debito,VR

Fiz um exemplo aqui.

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 .