[Bug] O campo data está interferindo no campo quantidade. | TypeScript parte 2: avançando na linguagem

Sempre que eu crio uma negociação o "ano" fica no campo "quantidade". ilustração do problema na aplicação

Meu código:

negociacoes-view.ts:

import { Negociacoes } from "../models/negociacoes.js";

export class NegociacoesView {

     private elemento: HTMLElement;

     constructor(seletor :string){
        this.elemento = document.getElementById(seletor)
    }

    template(model: Negociacoes): string{
        return `
        <table class = "table table-hover table-bordered">
            <thead>
                <tr>
                    <th>DATA</th>
                    <th>QUANTIDADE</th>
                    <th>VALOR</th>
                </tr>
            </thead>


            <tbody>
            ${model.listar().map(negociacao =>{
                return `
                <tr>
                    <td>${new Intl.DateTimeFormat().format(negociacao.data)}</td>
                    <td>${negociacao.quantidade}</td>
                    <td>${negociacao.valor}</td>
                </tr>
                `
            }).join(' ')}
            </tbody>
        </table>
        `;
    }

    update(model: Negociacoes){
        this.elemento.innerHTML = this.template(model);
    }
}

O problema parece ser que o campo "ano" está sendo exibido no lugar da quantidade na tabela da sua aplicação. Isso pode acontecer porque o objeto de data da negociação não está sendo construído corretamente.

Uma solução é verificar como a data está sendo definida na classe Negociacao. É importante garantir que os valores para dia, mês e ano estejam sendo passados na ordem correta para o construtor de Date().

Outra opção é criar um método na classe Negociacao que formate a data corretamente para exibição na tabela, ao invés de passar o objeto de data diretamente para o template.

Por exemplo, na classe Negociacao, você pode adicionar um método chamado "dataFormatada" que retorna a data no formato desejado:

export class Negociacao {
    constructor(
        readonly data: Date, 
        readonly quantidade: number, 
        readonly valor: number
    ) {}

    get volume() {
        return this.quantidade * this.valor;
    }

    dataFormatada() {
        return `${this.data.getDate()}/${this.data.getMonth() + 1}/${this.data.getFullYear()}`;
    }
}

Então, na função template() da classe NegociacoesView, você pode chamar esse método para exibir a data formatada:

template(model: Negociacoes): string{
    return `
    <table class = "table table-hover table-bordered">
        <thead>
            <tr>
                <th>DATA</th>
                <th>QUANTIDADE</th>
                <th>VALOR</th>
            </tr>
        </thead>


        <tbody>
        ${model.listar().map(negociacao =>{
            return `
            <tr>
                <td>${negociacao.dataFormatada()}</td>
                <td>${negociacao.quantidade}</td>
                <td>${negociacao.valor}</td>
            </tr>
            `
        }).join(' ')}
        </tbody>
    </table>
    `;
}

Isso deve garantir que a data seja exibida corretamente na tabela, sem interferir no campo de quantidade.

Chegou a hora de transformar