Fehler, wenn nicht überprüft wird, ob {{object.field}} vorhanden ist

74

Ich habe eine Frage zum Überprüfen, ob ein Feld im Objekt vorhanden ist.

Ich möchte alle Kategorien drucken, die der Benutzer hat, also mache ich so etwas:

  <ul *ngIf="user.categories.length >  0" *ngFor="#category of user.categories">
    <li>
      {{category.name}}
    </li>
  </ul>

Der Grund? Alle Daten werden RICHTIG gedruckt, aber in der Webkonsole wird folgende Fehlermeldung angezeigt :

Cannot read property 'name' of null

Aber wenn ich so etwas mache wie:

  <ul *ngIf="user.categories.length >  0" *ngFor="#category of user.categories">
    <li *ngIf="category">
      {{category.name}}
    </li>
  </ul>

Dann ist alles in Ordnung.

Mache ich etwas falsch oder muss ich das jedes Mal überprüfen? Hattest du jemals ein Problem wie dieses?

variables properties null angular Elzoy
quelle

Antworten:

211

Grundverwendung

Verwenden Sie den Operator für die sichere Navigation

{{category?.name}}

dann namewird nur gelesen wenn categorynicht null.

Array

Dies funktioniert nur für den .(Dereferenzierungs-) Operator. Für ein Array können Sie verwenden

{{records && records[0]}}

Siehe auch Winkel 2 - Eigenschaft '0' eines undefinierten Fehlers mit Kontext kann nicht gelesen werden. FEHLERKONTEXT: [Objekt Objekt]

asynchrones Rohr

Mit asyncRohr kann es wie verwendet werden

{{(chapters | async)?.length

ngModel

Mit ngModelderzeit muss es aufgeteilt werden

[ngModel]="details?.firstname" (ngModelChange)="details.firstname = $event"

Siehe auch Daten werden in Angular2 nicht an die Vorlage angehängt

*ngIf

Eine Alternative besteht immer darin, den Teil der Ansicht mit *ngIf="data"zu umbrechen, um zu verhindern, dass der Teil überhaupt gerendert wird, bevor der dataverfügbar ist, um den Dereferenzierungsfehler zu verhindern.

Günter Zöchbauer
quelle
Ja, funktioniert nicht für ngModelBindungen. Es fehlen immer noch die automatisch generierten Eigenschaften von Angular1, die für Client-Server-CRUD-Operationen äußerst praktisch waren.
RoninCoder
@ Hani Ich kenne Angular1 nicht. Können Sie mich auf einige Informationen zu automatisch generierten Eigenschaften hinweisen?
Günter Zöchbauer
<input type="text" ng-model="category.name" />und der Name, der null ist, würde automatisch die Eigenschaft name generieren, sobald der Benutzer in das Textfeld eingibt. Ganz zu schweigen davon, dass der Elvis-Operator nicht funktioniert [(ngModel)]. Wäre schön, es auch dort zu haben.
RoninCoder
Sie haben kürzlich darüber gesprochen, das Verhalten des Elvis-Operators als Standard festzulegen. Wahrscheinlich werden sie etwas verbessern. Wahrscheinlich nicht zu früh.
Günter Zöchbauer
3
Ich habe nach dieser Antwort gesucht, aber es ist schwierig, Angular2-4-Antworten zu finden. Danke ist so einfach und funktioniert gut!
Mikel