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

Não entendi onde está o erro.

Apareceu o seguinte erro : SystemJS) Cannot read property 'bind' of undefined TypeError: Cannot read property 'bind' of undefined at execute (http://localhost:3000/js/app.js:14:63) Error loading http://localhost:3000/js/app.js

Não entendi onde está errado. Poderiam me ajudar?

import { NegociacaoController } from "../ts/controllers/NegociacaoController";

const controller = new NegociacaoController();

$(".form").submit(controller.adiciona.bind(controller));
$('#botao-importa').click(controller.importaDados.bind(controller));
import { NegociacoesView,MensagemView } from "../views/index";
import { Negociacao,Negociacoes } from "../models/index";
import { logarTempoDeExecucao,domInject } from '../helpers/decoreitors/index'


export class NegociacaoController{
@domInject('#data')
private _inputData:JQuery;

@domInject('#quantidade')
private _inputQuantidade:JQuery;

@domInject('#valor')
private _inputValor:JQuery;

private _negociacoes = new Negociacoes();
private _negociacoesView = new NegociacoesView('#negociacoesView');
private _mensagemView = new MensagemView('#mensagemView');

constructor(){
this._negociacoesView.update(this._negociacoes);

}

@logarTempoDeExecucao()
adiciona(event:Event){

    event.preventDefault();
    let data = new Date(this._inputData.val().replace(/-/g,','));

    if( !this.ehDiaUtil ){
        this._mensagemView.update("Negociacoes somente em dias uteis.");
    }

    const negociacao = new Negociacao(
                            data,
                            parseInt(this._inputQuantidade.val()),
                            parseFloat(this._inputValor.val())
    );

    this._negociacoes.adiciona(negociacao);

    this._negociacoesView.update(this._negociacoes);

    this._mensagemView.update('Item adicionado com sucesso');
}

private ehDiaUtil( data : Date ) {   
    return data.getDay() != DiaDaSemana.Sabado && data.getDay() != DiaDaSemana.Domingo;
}

importaDados(){
   function isOk(res : Response){

        if(res.ok){
            return res;
        }else{
            throw new Error(res.statusText);
        }
    }
    fetch('http://http://localhost:8080/dados')
        .then( res => isOk(res))
        .then( res => res.json())
        .then((dados : any[]) => {   
                                dados.map(dado => 
                                                new Negociacao( new Date(), dado.vezes,dado.montante))
                                     .forEach(negociacao => this._negociacoes.adiciona(negociacao))
                                this._negociacoesView.update(this._negociacoes);
                                })
        .catch(err => console.log(err.message))
}

}

enum DiaDaSemana{
    Domingo,
    Segunda,
    Terca,
    Quarta,
    Quinta,
    Sexta,
    Sabado
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagemView"></div>

    <form class="form">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
        <button id="botao-importa" class="btn btn-primary" type="button">Importar</button>
    </form>

    <br>
    <br>

    <div id='negociacoesView'>

    </div> 

    <script src="lib/jquery.min.js"></script>  
    <script src="lib/system.js"></script>
    <script>
        System.defaultJSExtensions = true;
        System.import('js/app.js').catch(err => console.error(err));
   </script>

</body>
</html>
4 respostas

Olá Lucas, tudo bem?

Você pode conferir se esse erro não é causado pelo fetch não estar conseguindo acessar o endereço correto?

Você digitou: fetch('http://http://localhost:8080/dados')

Quando na verdade é fetch('http://localhost:8080/dados')

Provavelmente você duplicou o trecho enquanto digitava :)

Abraços e Bons Estudos!

Obrigado, mas mesmo assim continua o erro.

solução!

Opa, dei uma olhada novamente e acredito que encontrei o erro:

No seu arquivo app.ts mude a linha:

import { NegociacaoController } from "../ts/controllers/NegociacaoController";

Para: import { NegociacaoController } from './controllers/NegociacaoController';

Provavelmente quando o arquivo está sendo compilado ele está tentando acessar a pasta /ts porém essa pasta não está disponível no resultado da nossa compilação :)

Abraços e Bons estudos!

Nossa, Vlw.

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