Solucionar problemas de renderização
Os componentes do Microsoft Graph Toolkit são altamente personalizáveis. Isso os torna adequados para muitas soluções diferentes. Se você ficar preso personalizando a forma como eles exibem dados, aqui estão algumas dicas para ajudá-lo a entender o que pode estar errado.
Veja quais dados estão disponíveis no modelo
Os componentes do Microsoft Graph Toolkit mostram dados usando modelos, como você viu anteriormente neste módulo. Cada componente vem com um conjunto de modelos predefinidos, mas você pode personalizá-los para corresponder ao seu aplicativo.
Quando você personaliza modelos, o problema mais comum é referenciar incorretamente os dados associados ao modelo. Se você referenciar uma propriedade inexistente no modelo, o componente não mostrará nada. Se você não vir os dados esperados, o melhor lugar para começar é examinar os dados associados ao modelo. Você pode fazer essa etapa adicionando {{ this }} ao modelo.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template>{{ this }}</template>
</mgt-agenda>
Este exemplo mostra todos os dados associados ao modelo no aplicativo Web.
Se você estiver trabalhando com um conjunto de dados complexo, examinar os dados diretamente no navegador não é conveniente. Em vez disso, convém registrá-lo no console nas ferramentas de desenvolvedor do navegador, onde você pode explorá-lo como um objeto. Para fazer isso, use {{ console.log(this) }}.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template>{{ console.log(this) }}</template>
</mgt-agenda>
Este exemplo registra os dados associados ao modelo no console.
Nos modelos dos componentes, você pode usar qualquer função JavaScript entre {{ }}. Dessa forma, você não está limitado a mostrar os dados no navegador ou registro em log no console.
Outra dica é que os nomes de propriedade dos dados associados ao modelo diferenciam maiúsculas de minúsculas. Se os dados esperados não aparecerem no componente, verifique se todos os nomes de propriedade estão escritos corretamente.
Você está usando o modelo certo?
Alguns componentes do Microsoft Graph Toolkit expõem vários modelos para você personalizar. Escolha qual modelo você deseja usar com o atributo data-type.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template data-type="event">{{ console.log(this) }}</template>
</mgt-agenda>
Se você não especificar o atributo data-type, o componente usará o modelo padrão.
Cada modelo tem uma estrutura de dados diferente associada a ele. Ao alternar entre modelos, você precisa atualizar o conteúdo do modelo para se referir corretamente ao conjunto de dados disponível.
Você pode encontrar quais modelos estão disponíveis e o que eles expõem na documentação de cada componente. Vamos colocar algumas dessas técnicas de depuração em prática.