Tabela sumiu

Olá, depois de tirar update da classe NegociacoesView para a View, percebi que a tabela simiu. Como faço para que ela reapareça?

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


export class NegociacoesView extends View<Negociacoes> {

    // private elemento: HTMLElement;
    // constructor(seletor: string) {
    //     this.elemento = document.querySelector(seletor);
    // }
    
    template(model: Negociacoes): string {
        return `
        <table class="table table-hovered table-bordered">
            <thead>
                <tr>
                    <th>DATA</th>
                    <th>QUANTIDADE</th>
                    <th>VALOR</th>
                </tr>
            </thead>
            <tbody>
                ${model.lista().map(negociacao => {
                    return `
                        <tr>
                            <td>${new Intl.DateTimeFormat().format(negociacao.data)}</td>
                            <td>${negociacao.quantidade}</td>
                            <td>${negociacao.valor}</td>
                        </tr>
                    `;
                }).join('')}
            </tbody>
        </table>
        `;
    }
}

export class View<T> {

    protected elemento: HTMLElement;

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

    update(model: T): void {
        const template = this.template(model);
        this.elemento.innerHTML = template;
    }

    template(model: T): string {
        throw Error('Classe filha precisa implementar o método template');
    }
}

Oi Mike, vou enviar aqui os demais arquivos.

negociacao-controller

import { Negociacao } from "../models/negociacao.js";
import { Negociacoes } from "../models/negociacoes.js";
import { MensagemView } from "../views/mensagem-view.js";
import { NegociacoesView } from "../views/negociacoes-view.js";
import { View } from "../views/view";

export class NegociacaoController {
    private inputData: HTMLInputElement;
    private inputQuantidade: HTMLInputElement;
    private inputValor: HTMLInputElement;
    private negociacoes = new Negociacoes();
    private negociacoesView = new NegociacoesView('#negociacoesView');
    private mensagemView = new MensagemView('#mensagemView');


    constructor() {
        this.inputData = document.querySelector("#data");
        this.inputQuantidade = document.querySelector("#quantidade");
        this.inputValor = document.querySelector("#valor");
        this.negociacoesView.update(this.negociacoes);
    }

    adiciona(): void {
        const negociacao = this.criaNegociacao();
        // console.log(negociacao);
        negociacao.data.setDate(12);
        this.negociacoes.adiciona(negociacao);
        this.negociacoesView.update(this.negociacoes);
        this.mensagemView.update('Negociação adicionada com Sucesso!')
        this.limparFormulario();
    }

    criaNegociacao(): Negociacao{
        const exp = /-/g;
        const data = new Date(this.inputData.value.replace(exp,","));
        const quantidade = parseInt(this.inputQuantidade.value);
        const valor = parseFloat(this.inputValor.value);
        return new Negociacao(data, quantidade, valor);
    }

    limparFormulario(): void {
        this.inputData.value = "";
        this.inputQuantidade.value = "";
        this.inputValor.value = "";
        this.inputData.focus();
    }

    
}

mensagem-view

import { View } from "./view";


export class MensagemView extends View<string>{

    // private elemento: HTMLElement;
    // constructor(seletor: string) {
    //     this.elemento = document.querySelector(seletor);
    // }

    template(model: string): string {
        return `
        <p class="alert alert-info">${model}</p>`
    }

    update(model: string): void {
        const template = this.template(model);
        this.elemento.innerHTML = template;
    }
}

negociacao

export class Negociacao {
    // private _data: Date;
    // private _quantidade: number;
    // private _valor: number;

    constructor(
        // private _data: Date,
        // private _quantidade: number,
        // private _valor: number

        // public readonly data: Date,
        private _data: Date,
        public readonly quantidade: number,
        public readonly valor: number
    ) {}

    // get data(): Date {
    //     return this._data;
    // }

    get data(): Date {
        const data = new Date(this._data.getTime())
        return data;
    }

    // get quantidade(): number{
    //     return this._quantidade;
    // }

    // get valor(): number {
    //     return this._valor;
    // }

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

negociacoes

import { Negociacao } from "./negociacao.js";

export class Negociacoes {
    // private negociacoes: Array<Negociacao> = [];
    private negociacoes: Negociacao[] = [];

    adiciona(negociacao: Negociacao) {
        this.negociacoes.push(negociacao);
    }

    lista(): ReadonlyArray<Negociacao> {
        return this.negociacoes;
    }
}

app

import { NegociacaoController } from "./controllers/negociacao-controller.js";

const controller = new NegociacaoController();
const form = document.querySelector(".form");
form.addEventListener("submit", event => {
    event.preventDefault();
    controller.adiciona();
});

Mergulhe em IA generativa do zero com Alura e Google

5 aulas gratuitas | com certificado