Angular 2 Object Interpolation Problem in NgFor/NgIf

Question

Ich habe eine *ngFor für ein Array von User-Objekten. Innerhalb dieses ngFor ist ein div mit einem *ngIf, und innerhalb dieses div, ist ein Tag mit einem interpolierten src Attribut.

<md-card *ngFor="let user of users" [user]="user" style="background-color: rgb(48, 48, 48) !important;"> 
    <md-card-title-group class="gotham" style="color: rgb(93, 93, 93) !important; font-family: 'Gotham' !important;"> 

    <md-card-title style="width: 200px !important; text-overflow: ellipsis !important; display: inline-block; overflow: hidden;"><span class="gotham">{{user.username}}</span></md-card-title> 
    <md-card-subtitle class="gotham" style="color: rgb(161, 161, 161) !important;"><span class="gotham">User since {{ user.datejoined | date:'fullDate' }}</span></md-card-subtitle> 
    <md-list> 
    </md-list> 
    <div *ngIf="user.fbdetails" style="display: inline-block; float: right;"><img style="width: 40px; height: 40px;" src="app/assets/facebook_circle_color-512.png"/></div> 
    <div *ngIf="user.twitterdetails" style="display: inline-block; float: right;"><img style="width: 40px; height: 40px;" src="app/assets/twitter_circle_color-256.png"/></div> 
    <i *ngIf="!user.fbdetails.picture.data.url" class="material-icons" style="font-size: 60px; color: white !important; display: inline-block; float: right;">people</i> 
    <div *ngIf="user.fbdetails" style="display: inline-block; float: right;"><img style="width: 60px; height: 60px;" src="{{user.fbdetails.picture.data.url}}"/></div> 
    </md-card-title-group> 
</md-card> 

Nun ist die div, die die <img> hüllt sollte nicht angezeigt werden, wenn es keine user.fbdetails in der Objekthierarchie ist. Dies gilt für fast alle betroffenen Benutzer (die meisten haben keine fbdetails). Dies bedeutet, dass der interpolierte Wert der Bindung {{user.fbdetails.picture.data.url}} nicht aufgefüllt ist, aber die *ngIf sollte verhindern, dass diese Bindungen vorhanden sind, wenn keine fbdetails vorhanden ist. Allerdings bekomme ich immer noch einen Cannot read property "picture" of undefined Fehler, obwohl dieser wegen der *ngIf nie ins Spiel kommen sollte.

Dies ist etwas, das ich ziemlich oft in Angular 1 gemacht habe, also bin ich mir nicht sicher, was los ist.

Answer 1

den Safe-Navigation-Operator sollte Ihr Problem

<i *ngIf="!user.fbdetails?.picture?.data?.url" 

dieses Problem zu beheben Wegwinkel wirft nicht, wenn fbdetailsnull ist.

Answer 2

Fehler, die Sie bekommen, ist von

<i *ngIf="!user.fbdetails.picture.data.url" class="material-icons" style="font-size: 60px; color: white !important; display: inline-block; float: right;">people</i> 

Es versucht Bild von user.fbdetails lesen