1
resposta

O que tem de errado?

Olá! Na parte de exibir o extrato no navegador as linhas decorativas da tabela que deveriam aparecer embaixo de data, valor e destino não aparecem no meu. Já comparei meu código com o do instrutor e parecem estar iguais mas o dele funciona e o meu não. Alguém consegue me ajudar? Obrigada.

extrato.component.html do instrutor:

<table class="tabela">
    <thead class="tabela__cabecalho">
      <th class="tabela__cabecalho__conteudo">Data</th>
      <th class="tabela__cabecalho__conteudo">Valor</th>
      <th class="tabela__cabecalho__conteudo">Destino</th>
    </thead>
    <tbody>
      <tr class="tabela__linha" *ngFor="let transferencia of transferencias">
        <td class="tabela__conteudo">
          {{ transferencia.data | date: "short" }}
        </td>
        <td class="tabela__conteudo">{{ transferencia.valor | currency }}</td>
        <td class="tabela__conteudo">{{ transferencia.destino }}</td>
      </tr>
    </tbody>
  </table>

Meu extrato.component.html:

<table class="tabela">
  <thead class="tabela__cabecalho">
    <th class="tabela__cabelhaco__conteudo">Data</th>
    <th class="tabela__cabelhaco__conteudo">Valor</th>
    <th class="tabela__cabelhaco__conteudo">Destino</th>
  </thead>
  <tbody *ngIf="transferencias?.length; else listaVazia">
    <tr class="tabela__linha" *ngFor="let transferencia of transferencias">
      <td class="tabela__conteudo">{{transferencia.data | date:'short'}}</td>
      <td class="tabela__conteudo">{{transferencia.valor | currency}}</td>
      <td class="tabela__conteudo">{{transferencia.destino}}</td>
    </tr>
  </tbody>
</table>

Código extrato.component.scss:

.titulo {
  text-align: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.tabela {
  text-align: center;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

  &__cabecalho {
    color: var(--primary);

    &__conteudo {
      padding: 10px;
      border-bottom: 2px solid green;
    }
  }

  &__linha {
    margin-bottom: 10px;
    border-radius: 4px;

    &:last-child {
      .tabela__conteudo {
        border-bottom: none;
      }
    }
  }

  &__conteudo {
    padding: 10px;
    border-bottom: 1px solid var(--cinza-claro);
  }
}
1 resposta

Olá Carolina.

Aparentemente está tudo certo com os arquivos de visualização. Nesse caso é bem possível que o erro esteja acontecendo no momento de popular o array de transferências ou até mesmo no momento de propagar essa coleção.

Para tentarmos entender melhor o problema, poderia confirmar se esses trechos desses arquivos estão semelhantes:

app.component.ts

/*Outros códigos aqui encima*/

export class AppComponent {
  title = 'bytebank';
  transferencias: any[] = [];

  transferir($event) {
    console.log($event);
    const transferencia = {...$event, data: new Date()}
    this.transferencias.push(transferencia);
  }
}

app.component.html

<app-nova-transferencia
  (aoTransferir)="transferir($event)"
></app-nova-transferencia>

<app-extrato [transferencias]="transferencias"></app-extrato>

extrato.component.ts

/*Outros códigos aqui encima*/

export class ExtratoComponent implements OnInit {
  @Input() transferencias: any[];

  constructor() {}

  ngOnInit(): void {}
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software