Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Erro!

Boa tarde, estou recebendo um erro, e a lista não está sendo exibida. Insira aqui a descrição dessa imagem para ajudar na acessibilidadeEsse é o Meu NegociaoesView

export class NegociacoesView {

    private element: HTMLElement;
    constructor(selector: string) {
        this.element = document.querySelector(selector);  
    }
    Template(): string {
        return `
        <table class=" table table-hover table-bourdered table-striped"> 
        <thead> 
            <tr>
                <th>DATA</th>
                <th>QUANTIDADE</th>
                <th>VALOR</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        </table>

        `;
    }
        update(): void{
        this.element.innerHTML = this.Template();
    }
}

e esse o NegociaçõesController

import { listaNegociacoes } from '../models/Lista-negociacoes.js';
import { Negociacao } from '../models/negociacao.js';
import { NegociacoesView } from '../views/negociacoes-view.js';

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

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

    adiciona(): void {
        const negociacao = this.criaNegociacao();
        this.negociacoes.adiciona(negociacao);
        console.log(this.negociacoes.lista());
        this.limparFormulario();
    }

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

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

Se alguem puder me ajudar agradeço !

2 respostas
solução!

Olá, Jonas, tudo bem?

A mensagem de erro do seu console está dizendo que não é possível modificar a propriedade innerHTML de null na linha 26 do arquivo negociacoes.view.js. Nessa linha, temos esse código:

this.element.innerHTML = this.Template();

Ou seja, o this.element na verdade está sendo avaliado como null. Isso acontece quando o elemento não foi buscado no DOM corretamente e o querySelector retorna null.

Em NegociacoesController, você tem esse código:

private negociacoesView = new NegociacoesView('#negociacoesView'); 

Eu testei seu código aqui e funcionou normalmente. Como não funcionou aí, você pode verificar se no index.html, o elemento <div id="negociacoesViews"></div> foi criado corretamente (pode ter sido um erro de digitação do id).

Espero ter ajudado! Abraços e bons estudos :)

Opa Antônio bom dia, ajudou sim muito Obrigado !