排查呈现问题

Microsoft Graph 工具包组件具有很高的可自定义性。这使得它们适用于许多不同的解决方案。如果在自定义它们显示数据的方式时遇到问题，以下一些提示或许可以帮助你了解可能出现的问题。

查看可在模板中提供的数据

如本模块前面的内容所述，Microsoft Graph 工具包组件使用模板显示数据。每个组件都附带一组预定义的模板，但你可以自定义这些模板以匹配你的应用。

在自定义模板时，最常见的问题是错误地引用绑定到模板的数据。如果在模板中引用不存在的属性，则组件不会显示任何内容。如果未看到预期的数据，最好是先检查一下绑定到模板的数据。可以通过将 {{ this }} 添加到模板来执行此步骤。

<mgt-agenda date="June 28, 2023" days="3" group-by-day>
  <template>{{ this }}</template>
</mgt-agenda>

此示例显示了在 Web 应用中绑定到相应模板的所有数据。

显示示例结果的屏幕截图。

如果使用的是复杂的数据集，则直接在浏览器中检查数据会很不方便。相反，你可能希望将其记录到浏览器的开发人员工具中的控制台，在那里你可以将其作为一个对象来进行浏览。要进行此操作，请使用 {{ console.log(this) }}。

<mgt-agenda date="June 28, 2023" days="3" group-by-day>
  <template>{{ console.log(this) }}</template>
</mgt-agenda>

此示例在控制台中记录了绑定到模板的数据。

显示控制台结果的屏幕截图。

在组件的模板中，可以在 {{ }} 之间使用任何 JavaScript 函数。这样，你就不局限于在浏览器中显示数据或将其记录到控制台。

另一个提示是绑定到模板的数据的属性名称需区分大小写。如果预期看到的数据未显示在组件中，请检查是否所有属性名称均拼写正确。

某些 Microsoft Graph 工具包组件会显示多个模板供你自定义。你需要使用 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 属性，组件将使用默认模板。

每个模板都绑定了不同的数据结构。在模板之间进行切换时，需要更新模板内容以正确引用可用的数据集。

你可以在每个组件的文档中找到可用的模板以及它们显示的内容。让我们来实践一下其中的一些调试技术。