2

Em uma aplicação feita em Angular 2 eu preciso montar um relatório em html, eu consulto os dados pela API e monstro os dados no html através do data-bind, só que ocorre este erro:

EXCEPTION: Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded

Por que ocorre este erro? Teria como eu contornar isso?

Abaixo uma parte do template html, pois quando tento colar ele td aqui da erro pelo limite de tamanho. Existe o objeto relatorio que dentro dele existe oito propriedades que são objetos que possuem suas propriedades, o objeto relatório é preenchido com dados retornados pela API.

<div class="card">

<div class="form-horizontal" style="align-content: left;">
    <div class="card-header">
        <h2>
            Cenário Econômico/Financeiro
        </h2>
    </div>

    <div class="card-body card-padding">

        <div class="form-group">
            <label for="receitaBrutaAnual" class="col-sm-6 control-label"><b>1.1 Receita Bruta anual</b></label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.ReceitaBrutaAnual}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="receitaBrutaAnual" placeholder="Receita Bruta anual"
                        required [(ngModel)]="relatorio.Questionario1.ReceitaBrutaAnual" (ngModelChange)="desenhaGrafico($event)"
                        borda-animada>
                </div>-->
            </div>
        </div>

        <div class="form-group">
            <label for="receitaAssistSaudeAnual" class="col-sm-6 control-label real"><b>1.2 Receita anual com Contraprestações de Planos de Saúde</b></label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.ReceitaAssistSaudeAnual}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="receitaAssistSaudeAnual" placeholder="Receita anual com Contraprestações de Planos de Saúde"
                        required [(ngModel)]="relatorio.Questionario1.ReceitaAssistSaudeAnual" (ngModelChange)="desenhaGrafico($event)"
                        borda-animada>
                </div>-->
            </div>
            <!--<div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">Considerar toda a produção do cooperado incluindo intercâmbio, e as receitas com intercâmbio.</label>
                </div>
            </div>-->
        </div>

        <div class="form-group">
            <label for="percentDespesasAdm" class="col-sm-6 control-label"><b>1.3 Percentual das Despesas Administrativas em relação à Receita Bruta</b></label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.PercentDespesasAdm}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right porcentagem" id="percentDespesasAdm" placeholder="Percentual das Despesas Administrativas em relação à Receita Bruta"
                        required [(ngModel)]="relatorio.Questionario1.PercentDespesasAdm" (ngModelChange)="desenhaGrafico($event)"
                        porcentagem borda-animada>
                </div>-->
            </div>
        </div>

        <div class="form-group">
            <label for="valorSaudeAnual" class="col-sm-6 control-label"><b>1.4 Valor anual da Despesa Assistencial com Saúde</b></label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.ValorSaudeAnual}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="valorSaudeAnual" placeholder="Valor anual da Despesa Assistencial com Saúde"
                        required [(ngModel)]="relatorio.Questionario1.ValorSaudeAnual" (ngModelChange)="desenhaGrafico($event)"
                        borda-animada>
                </div>-->
            </div>
            <!--<div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">Considerar também as despesas com intercâmbio.</label>
                </div>
            </div>-->
        </div>

        <div class="form-group">
            <label for="pme" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.4.1 PME (PRAZO MÉDIO DE PAGAMENTO DE EVENTOS) (Valor em dias)</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.PME}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" id="pme" placeholder="PME (PRAZO MÉDIO DE PAGAMENTO DE EVENTOS)"
                        required [(ngModel)]="relatorio.Questionario1.PME" (ngModelChange)="desenhaGrafico($event)" numerico
                        borda-animada>
                </div>-->
            </div>
        </div>

        <div class="form-group">
            <label for="indices" class="col-sm-6 control-label"><b>1.5 Índices de Inadimplência</b></label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <!--<input type="text" class="form-control input-sm" id="pme" placeholder="PME (PRAZO MÉDIO DE PAGAMENTO DE EVENTOS)" 
                    [(ngModel)]="relatorio.Questionario1.PME">-->
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="inadimpCorrentePF" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.5.1 INADIMPLÊNCIA CORRENTE PF</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.InadimpCorrentePF}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right porcentagem" id="inadimpCorrentePF" placeholder="INADIMPLÊNCIA CORRENTE PF"
                        required [(ngModel)]="relatorio.Questionario1.InadimpCorrentePF" (ngModelChange)="desenhaGrafico($event)"
                        porcentagem borda-animada>
                </div>-->
            </div>
            <!--<div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">Essa inadimplência deve ser verificada após 90 dias do vencimento do boleto.</label>
                </div>
            </div>-->
        </div>

        <div class="form-group">
            <label for="inadimpCorrentePJ" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.5.2 INADIMPLÊNCIA CORRENTE PJ</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.InadimpCorrentePJ}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right porcentagem" id="inadimpCorrentePJ" placeholder="INADIMPLÊNCIA CORRENTE PJ"
                        required [(ngModel)]="relatorio.Questionario1.InadimpCorrentePJ" (ngModelChange)="desenhaGrafico($event)"
                        porcentagem borda-animada>
                </div>-->
            </div>
            <!--<div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">Essa inadimplência deve ser verificada após 90 dias do vencimento da fatura.</label>
                </div>
            </div>-->
        </div>

        <div class="form-group">
            <label for="balanco" class="col-sm-6 control-label"><b>1.6 Informações do Balanço Patrimonial</b></label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <!--<input type="text" class="form-control input-sm" id="pme" placeholder="PME (PRAZO MÉDIO DE PAGAMENTO DE EVENTOS)" 
                    [(ngModel)]="relatorio.Questionario1.PME">-->
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="ativoTotal" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.1 ATIVO TOTAL</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.AtivoTotal}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="ativoTotal" placeholder="ATIVO TOTAL" required [(ngModel)]="relatorio.Questionario1.AtivoTotal"
                        (ngModelChange)="desenhaGrafico($event)" borda-animada>
                </div>-->
            </div>
        </div>

        <div class="form-group">
            <label for="ativoCirculante" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.2 ATIVO CIRCULANTE</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.AtivoCirculante}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="ativoCirculante" placeholder="ATIVO CIRCULANTE" required
                        [(ngModel)]="relatorio.Questionario1.AtivoCirculante" (ngModelChange)="desenhaGrafico($event)" borda-animada>
                </div>-->
            </div>
        </div>

        <div class="form-group">
            <label for="ativoCirculanteDisponivel" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.3 ATIVO CIRCULANTE DISPONÍVEL</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.AtivoCirculanteDisponivel}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="ativoCirculanteDisponivel" placeholder="ATIVO CIRCULANTE DISPONÍVEL"
                        required [(ngModel)]="relatorio.Questionario1.AtivoCirculanteDisponivel" (ngModelChange)="desenhaGrafico($event)"
                        borda-animada>
                </div>-->
            </div>
        </div>
        <div class="form-group">
            <label for="estoque" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.4 ESTOQUE</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.Estoque}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="estoque" placeholder="ESTOQUE" required [(ngModel)]="relatorio.Questionario1.Estoque"
                        (ngModelChange)="desenhaGrafico($event)" borda-animada>
                </div>-->
            </div>
        </div>
        <div class="form-group">
            <label for="exigivelLongo" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.5 PASSIVO NÃO CIRCULANTE</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.ExigivelLongo}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="exigivelLongo" placeholder="PASSIVO NÃO CIRCULANTE"
                        required [(ngModel)]="relatorio.Questionario1.ExigivelLongo" (ngModelChange)="desenhaGrafico($event)"
                        borda-animada>
                </div>-->
            </div>
        </div>

        <div class="form-group">
            <label for="imobilizado" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.6 IMOBILIZADO</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.Imobilizado}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="imobilizado" placeholder="IMOBILIZADO" required [(ngModel)]="relatorio.Questionario1.Imobilizado"
                        (ngModelChange)="desenhaGrafico($event)" borda-animada>
                </div>-->
            </div>
        </div>

        <div class="form-group">
            <label for="realizavelLongo" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.7 REALIZÁVEL A LONGO PRAZO</label>
            <div class="col-sm-4">

                {{relatorio.Questionario1.RealizavelLongo}}

                <!--<div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="realizavelLongo" placeholder="REALIZÁVEL A LONGO PRAZO"
                        required [(ngModel)]="relatorio.Questionario1.RealizavelLongo" (ngModelChange)="desenhaGrafico($event)"
                        borda-animada>
                </div>-->
            </div>
        </div>

        <div class="form-group">
            <label for="investimentos" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.8 INVESTIMENTOS</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="investimentos" placeholder="Investimentos" required
                        [(ngModel)]="relatorio.Questionario1.Investimentos" (ngModelChange)="desenhaGrafico($event)" borda-animada>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="passivoCirculante" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.9 PASSIVO CIRCULANTE</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="passivoCirculante" placeholder="PASSIVO CIRCULANTE"
                        required [(ngModel)]="relatorio.Questionario1.PassivoCirculante" (ngModelChange)="desenhaGrafico($event)"
                        borda-animada>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="patrimonioLiquido" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.6.10 PATRIMÔNIO LÍQUIDO</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="patrimonioLiquido" placeholder="PATRIMÔNIO LÍQUIDO"
                        required [(ngModel)]="relatorio.Questionario1.PatrimonioLiquido" (ngModelChange)="desenhaGrafico($event)"
                        borda-animada>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="balanco" class="col-sm-6 control-label"><b>1.7 Indices Econômico/Financeiros</b></label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <!--<input type="text" class="form-control input-sm" id="pme" placeholder="PME (PRAZO MÉDIO DE PAGAMENTO DE EVENTOS)" 
                    [(ngModel)]="relatorio.Questionario1.PME">-->
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="liquidezCorrent" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.7.1 LIQUIDEZ CORRENTE</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="liquidezCorrent" placeholder="LIQUIDEZ CORRENTE" disabled
                        [(ngModel)]="relatorio.Questionario1.LiquidezCorrent">
                </div>
            </div>

            <div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">Ativo Circulante/Passivo Circulante Mostra a relação entre ativos conversíveis em dinheiro no curto
                        prazo e as dívidas de curto prazo.</label>
                </div>
            </div>

            <div class="gaugeContainer" align="center">
                <div id="twitterGauge" align="center"></div>
            </div>

        </div>

        <div class="form-group">
            <label for="liquidezSeca" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.7.2 LIQUIDEZ SECA</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="liquidezSeca" placeholder="LIQUIDEZ SECA" disabled [(ngModel)]="relatorio.Questionario1.LiquidezSeca">
                </div>
            </div>

            <div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">(Ativo Circulante - estoques)/Passivo Circulante Compara os ativos de curto prazo, sem contar a realização
                        dos estoques com as.</label>
                </div>
            </div>

            <div class="gaugeContainer" align="center">
                <div id="liqSecaGauge" align="center"></div>
            </div>

        </div>

        <div class="form-group">
            <label for="liquidezGeral" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.7.3 LIQUIDEZ GERAL</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="liquidezGeral" placeholder="LIQUIDEZ CORRENTE" disabled
                        [(ngModel)]="relatorio.Questionario1.LiquidezGeral">
                </div>
            </div>

            <div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">(Ativo Circulante + Ativo Não Circulante) / (Passivo Circulante + Passivo Não Circulante) Mostra
                        a capacidade de pagamento no. - OBS: O ativo não circulante é composto por REALIZÁVEL A LONGO PRAZO + IMOBILIZADO + INVESTIMENTOS</label>
                </div>
            </div>

            <div class="gaugeContainer" align="center">
                <div id="liquidezGeralGauge" align="center"></div>
            </div>

        </div>

        <div class="form-group">
            <label for="indiceLiquidezImediata" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.7.4 LIQUIDEZ IMEDIATA</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="indiceLiquidezImediata" placeholder="LIQUIDEZ IMEDIATA"
                        disabled [(ngModel)]="relatorio.Questionario1.IndiceLiquidezImediata">
                </div>
            </div>

            <div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">Ativo Circulante Disponível/Passivo Circulante Mostra a relação entre o ativo disponível e o passivo
                        circulante.
                    </label>
                </div>
            </div>

            <div class="gaugeContainer" align="center">
                <div id="indiceLiquidezImediataGauge" align="center"></div>
            </div>

        </div>

        <div class="form-group">
            <label for="indiceSolvenciaGeral" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.7.5 ÍNDICE DE SOLVÊNCIA GERAL</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="indiceSolvenciaGeral" placeholder="ÍNDICE DE SOLVÊNCIA GERAL"
                        disabled [(ngModel)]="relatorio.Questionario1.IndiceSolvenciaGeral">
                </div>
            </div>

            <div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">ATIVO TOTAL/ PASSIVO CIRCULANTE + EXIGÍVEL A LONGO PRAZO O índice de Solvência Geral expressa o grau
                        de garantia que a empresa dispõe em Ativos (totais), para pagamento do total de suas dívidas.</label>
                </div>
            </div>

            <div class="gaugeContainer" align="center">
                <div id="indiceSolvenciaGeralGauge" align="center"></div>
            </div>

        </div>

        <div class="form-group">
            <label for="imobPatrimLiquido" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.7.6 IMOBILIZAÇÃO DO PATRIMÔNIO LÍQUIDO</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="imobPatrimLiquido" placeholder="IMOBILIZAÇÃO DO PATRIMÔNIO LÍQUIDO"
                        disabled [(ngModel)]="relatorio.Questionario1.ImobPatrimLiquido">
                </div>
            </div>

            <div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">IMOBILIZADO/PATRIMÔNIO LÍQUIDO Indica o quanto do Patrimônio Líquido foram investidos no ativo permanente.</label>
                </div>
            </div>

            <div class="gaugeContainer" align="center">
                <div id="imobPatrimLiquidoGauge" align="center"></div>
            </div>

        </div>

        <div class="form-group">
            <label for="indiceEndivCurtoPrazo" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.7.7 ÍNDICE DE ENDIVIDAMENTO A CURTO PRAZO</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="indiceEndivCurtoPrazo" placeholder="ÍNDICE DE ENDIVIDAMENTO A CURTO PRAZO"
                        disabled [(ngModel)]="relatorio.Questionario1.IndiceEndivCurtoPrazo">
                </div>
            </div>

            <div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">PASSIVO CIRCULANTE / ATIVO TOTAL Mostra a relação entre o Passivo Circulante e o Ativo total.</label>
                </div>
            </div>

            <div class="gaugeContainer" align="center">
                <div id="indiceEndivCurtoPrazoGauge" align="center"></div>
            </div>

        </div>

        <div class="form-group">
            <label for="indiceEndivLongoPrazo" class="col-sm-6 control-label">&nbsp;&nbsp;&nbsp; 1.7.8 ÍNDICE DE ENDIVIDAMENTO A LONGO PRAZO</label>
            <div class="col-sm-4">

                <div class="fg-line">
                    <input type="text" class="form-control input-sm text-right" real id="indiceEndivLongoPrazo" placeholder="ÍNDICE DE ENDIVIDAMENTO A LONGO PRAZO"
                        disabled [(ngModel)]="relatorio.Questionario1.IndiceEndivLongoPrazo">
                </div>
            </div>

            <div class="has-warning">
                <div class="fg-line">
                    <label class="col-sm-12 control-label">EXIGÍVEL A LONGO PRAZO / ATIVO TOTAL Mostra a relação entre o Exigível Total e o Ativo total.</label>
                </div>
            </div>

            <div class="gaugeContainer" align="center">
                <div id="indiceEndivLongoPrazoGauge" align="center"></div>
            </div>

        </div>

    </div>
</div>
2
  • posta seu ts. Provalvelmente tem algum observable que era pra vc ter dado unsubscribe em algum ponto. 5/09/2018 às 16:26
  • Vc esta setando algum valor do form na mudança de outro valor? 25/09/2018 às 13:16

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .