Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Uncaught RangeError: Maximum call stack size exceeded

Por algum motivo meu map está gerando esse erro e não consigo entender o porquê. Meu componente está assim:

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

export class NegociacoesView {

private elemento: HTMLElement;
constructor(seletor: string) {
    this.elemento = document.querySelector(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.lista().map((negociacao) => {
                return (`
                       <tr>
                            <td>?</td>
                            <td>${negociacao.quantidade}</td>
                            <td>${negociacao.valor}</td>
                       </tr> 
                `)  
            }).join('')}
        </tbody>
    </table>        
    `
}

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

}

1 resposta
solução!

Oi Daniel, tudo bem?

Desculpe a demora em retornar.

Às vezes, você pode obter esse erro se importar/incorporar acidentalmente o mesmo arquivo JavaScript duas vezes.

Pelo código que você mandou, existem algumas diferenças nele para o da aula (não sei se você continuou as aulas seguintes). Então vou mandar o código igual ao da aula para você comparar as diferenças.

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

export class NegociacoesView {

    private elemento: HTMLElement;

    constructor(seletor: string) {
        this.elemento = document.querySelector(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.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>
        `;
    }

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

E verifica se você fez a mudança em negociacao-controller.ts, colocando assim:


adiciona(): void {
        const negociacao = this.criaNegociacao();
        this.negociacoes.adiciona(negociacao);
        this.negociacoesView.update(this.negociacoes);
        this.limparFormulario();
    }

Um abraço e bons estudos.