In an application made in Angular 2 I need to mount a report in html, I query the data by the API and monster the data in html through data-bind, only this error occurs:
EXCEPTION: Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
Why does this error occur? Would I have to get around this?
Below a part of the html template, because when I try to paste it here from the error by the size limit. There is the report object that has eight properties that are objects that have their properties, the report object is populated with data returned by the 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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>