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

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?

— Elzoy
quelle

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

Ich habe nach dieser Antwort gesucht, aber es ist schwierig, Angular2-4-Antworten zu finden. Danke ist so einfach und funktioniert gut!

— Mikel