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

Problemas com assincrono

Boa noite, estou tendo problemas para popular um gráfico com dados. Acredito que seja por conta da assincrinicidade do Angular.

Tenho uma página que carrega um componente, que é o gráfico. No meu componente, se eu setar o chartLabels e o chartData quando crio os atributos, funciona corretamente (as duas linhas que estão comentadas). Porém meu problema começa quando tento popular essas propriedades após buscar dados na minha API. Quando tento isso, dá problema, dizedo que o "data" é undefined.

Coloquei os códigos no gist, com o erro que recebo junto https://gist.github.com/anonymous/9d0cdabed25b9554e0fcb390acd411ec

5 respostas

Boa noite, José! Como vai?

O erro que está acontecendo é:

TypeError: Cannot read property 'data' of undefined

Isso significa que vc está tentando acessar uma propriedade data de um objeto que está indefinido. Como em nenhum momento vc faz algo do tipo no código que publicou, o erro deve estar ocorrendo em outra parte do seu código.

Onde no seu código vc tenta acessar essa propriedade data?

Bom dia Gabriel, ali no Gist, quando eu comento as linhas 22 e 23 do conversas-mes-chart.ts e descomento as linhas 24 e 25, tudo funciona corretamente, por isso acredito que o erro é com a assincronicidade. Talvez quando o componente tenta buscar os dados eles ainda não foram definidos pela API, não sei.

De qualquer forma, aqui vai mais partes do código que você solicitou:

https://gist.github.com/anonymous/be56c15bd8eeaa88ff6fb6e645dcdecd

Então José, aparentemente o seu problema não está na questão da assincronicidade.

Como inicialmente vc está passando arrays vazios para o seu componente enquanto é realizada a requisição HTTP, o seu componente deve estar tentando acessar a propriedade data do array chartData sem antes verificar se o array está vazio ou não. E, com isso, vc está tendo o erro descrito na mensagem.

TypeError: Cannot read property 'data' of undefined

No entanto, como o código do componente canvas utilizado por vc não está disponível, eu não tenho como indicar precisamente onde está localizado o erro. Mas acho que com o que eu falei aqui vc terá como achar o ponto exato.

Qualquer coisa é só falar!

solução!

Descobri. Na verdade eu estava inicializando a propriedade chartData errado.

Ao invés de

public chartData: any[] = [];

Deve ser

public chartData: any[] = [{ data: [] }];

Esse ai é o 'data' que ficava undefined.

Obrigado pela ajuda

Muito bem, José!

Siga em frente e bons estudos, meu aluno!

Grande abraço!