Sicherer Aufrufoperator in Angular/Typescript

Beim Ausgeben von Objekt-Attributwerten in Angular Templates kann es vorkommen, dass diese noch nicht initialisiert sind, d.h. undefined oder null sind. Um eine Fehlermeldung zu vermeiden muss man diese vorher prüfen.

Nehmen wir an eine Komponente wäre folgendermaßen definiert:

interface Mitarbeiter {
   name: String;
}
    
@Component({
  selector: 'app-component',
})
export class AppComponent{
  mitarbeiter: Mitarbeiter;
}Code-Sprache: JavaScript (javascript)

Dann würde folgende Ausgabe im Template einen Fehler liefern, da mitarbeiter noch nicht initialisiert ist und deshalb auch nicht auf die Eigenschaft „name“ zugegriffen werden kann.

<span style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color"><p> {{ mitarbeiter.name }} </p></span>   <!-- Fehler wenn mitarbeiter nicht initialisiert ist! -->
Code-Sprache: HTML, XML (xml)

Mit dem sicheren Aufrufoperator (oder auch sicherer Navigationsoperator, optionaler Verkettungsoperator oder null-bedingter Operator) wird sofort null zurückgegeben, wenn das erste Argument null ist. Um diesen Operator anzuwenden, fügt man hinter dem ersten Argument ein Fragezeichen ? an:

<span style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-black-color"><p> {{ mitarbeiter<strong>?</strong>.name }} </p></span>    <!-- Ok -->Code-Sprache: HTML, XML (xml)

Eine weitere Möglichkeit die Ausgabe abzusichern, wäre eine und-Verknüpfung:

<p> {{ mitarbeiter && mitarbeiter.name }} </p>    <!-- Ok -->Code-Sprache: HTML, XML (xml)