Устранение неполадок отрисовки
Компоненты Microsoft Graph Toolkit легко настраиваются. Это делает их подходящими для различных решений. Если вам не удается настроить отображение данных нужным образом, вот несколько советов, которые помогут вам понять причину возможной ошибки.
Просмотр доступных данных в шаблоне
Компоненты Microsoft Graph Toolkit отображают данные с помощью шаблонов, как показано ранее в этом модуле. Каждый компонент содержит набор предопределенных шаблонов, но вы можете настроить их в соответствии с вашим приложением.
При настройке шаблонов наиболее распространенной проблемой является неправильная ссылка на данные, привязанные к шаблону. Если сослаться на несуществующее свойство в шаблоне, компонент ничего не отобразит. Если вы не видите нужные данные, рекомендуется начать с изучения данных, привязанных к шаблону. Это можно сделать, добавив {{ this }} в шаблон.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template>{{ this }}</template>
</mgt-agenda>
В этом примере все данные, привязанные к шаблону, отображаются в веб-приложении.
Если вы работаете со сложным набором данных, изучение данных непосредственно в браузере не очень удобно. Вместо этого рекомендуется зарегистрировать их в консоли в средствах разработчика браузера, где можно изучить их как объект. Для этого используйте {{ console.log(this) }}.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template>{{ console.log(this) }}</template>
</mgt-agenda>
В этом примере данные, привязанные к шаблону, регистрируются в консоли.
В шаблонах компонентов можно использовать любую функцию JavaScript между {{ }}. Таким образом, вы не ограничены отображением данных в браузере или их регистрацией в консоли.
Другой совет — имена свойств данных, привязанных к шаблону, чувствительны к регистру. Если нужные данные не отображаются в компоненте, убедитесь, что все имена свойств написаны правильно.
Вы используете правильный шаблон?
Некоторые компоненты Microsoft Graph Toolkit предоставляют несколько шаблонов для настройки. Вы можете выбрать шаблон, который нужно использовать, с помощью атрибута data-type.
<mgt-agenda date="June 28, 2023" days="3" group-by-day>
<template data-type="event">{{ console.log(this) }}</template>
</mgt-agenda>
Если не указать атрибут data-type, компонент использует шаблон по умолчанию.
К каждому шаблону привязана разная структура данных. При переключении между шаблонами необходимо обновить содержимое шаблона, чтобы правильно ссылаться на доступный набор данных.
Доступные шаблоны и предоставляемые ими возможности можно найти в документации каждого компонента. Рассмотрим некоторые из этих методов отладки на практике.