Problembehandlung beim Rendern

Abgeschlossen

Microsoft Graph-Toolkit-Komponenten bieten umfangreiche Anpassungsmöglichkeiten. Dadurch eignen sie sich für viele verschiedene Lösungen. Wenn Sie bei der Anpassung der Datenanzeige nicht weiterkommen, finden Sie hier ein paar Tipps, die Ihnen helfen, zu verstehen, was falsch sein könnte.

Anzeigen, welche Daten in der Vorlage verfügbar sind

Microsoft Graph-Toolkit-Komponenten zeigen Daten mithilfe von Vorlagen an, wie Sie in diesem Modul bereits erfahren haben. Jede Komponente wird mit einer Reihe von vordefinierten Vorlagen ausgeliefert, die Sie jedoch an Ihre App anpassen können.

Das häufigste Problem beim Anpassen von Vorlagen sind falsche Verweise auf sie an die Vorlage gebundenen Daten. Wenn Sie in der Vorlage auf eine nicht vorhandene Eigenschaft verweisen, wird die Komponente nichts anzeigen. Wenn nicht die erwarteten Daten angezeigt werden, sollten Sie am besten zunächst die an die Vorlage gebundenen Daten untersuchen. Sie können diesen Schritt ausführen, indem Sie {{ this }} zur Vorlage hinzufügen.

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

In diesem Beispiel werden alle Daten angezeigt, die an die Vorlage in der Web-App gebunden sind.

Wenn Sie mit einem komplexen Dataset arbeiten, ist die Untersuchung der Daten direkt im Browser nicht sehr komfortabel. Stattdessen sollten Sie sie in der Konsole in den Entwicklertools des Browsers protokollieren, wo Sie sie als Objekt untersuchen können. Verwenden Sie dazu {{ console.log(this) }}.

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

In diesem Beispiel werden alle Daten protokolliert, die an die Vorlage in der Konsole gebunden sind.

In den Vorlagen der Komponenten können Sie eine beliebige JavaScript-Funktion zwischen {{ }} verwenden. Auf diese Weise sind Sie nicht auf die Anzeige der Daten im Browser oder auf die Protokollierung der Daten in der Konsole beschränkt.

Ein weiterer Tipp ist, dass bei den Eigenschaftsnamen der an die Vorlage gebundenen Daten zwischen Groß- und Kleinschreibung unterschieden wird. Wenn in der Komponente nicht die erwarteten Daten angezeigt werden, überprüfen Sie, ob alle Eigenschaftsnamen richtig geschrieben sind.

Verwenden Sie die richtige Vorlage?

Einige Microsoft Graph-Toolkitkomponenten stellen mehrere Vorlagen zur Verfügung, die Sie anpassen können. Sie wählen aus, welche Vorlage Sie mit dem Attribut data-type verwenden möchten.

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

Wenn Sie das Attribut data-type nicht angeben, verwendet die Komponente die Standardvorlage.

An jede Vorlage ist eine andere Datenstruktur gebunden. Wenn Sie zwischen Vorlagen wechseln, müssen Sie den Inhalt der Vorlage aktualisieren, um richtig auf das verfügbare Dataset zu verweisen.

Welche Vorlagen zur Verfügung stehen und was sie darstellen, finden Sie in der Dokumentation der jeweiligen Komponente. Lassen Sie uns einige dieser Debuggingtechniken in die Praxis umsetzen.

Weiter