NgFor/NgIfの角2のオブジェクト補間の問題

Question

私はUserオブジェクトの配列に対して*ngForを持っています。このngForの中には*ngIfのdivがあり、このdivの内側にはというタグと、補間されたsrc属性のタグがあります。今

<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> 

オブジェクト階層にはuser.fbdetailsがない場合に表示すべきではありません<img>をラップDIV。これは、問題のほとんどすべてのユーザーに適用されます（ほとんどの場合、fbdetailsはありません）。つまり、{{user.fbdetails.picture.data.url}}というバインディングの補間値は入力されませんが、は、fbdetailsが存在しない場合、それらのバインディングが存在しないようにする必要があります。しかし、*ngIfのために再生されるべきではないにもかかわらず、私はまだCannot read property "picture" of undefinedエラーを受け取ります。

これは私が角1でかなり頻繁に行ったことなので、何が起こっているのか分かりません。あなたの問題

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

これを修正する必要があり、安全なナビゲーション演算子を使用してuser.fbdetails

Answer 1

から画像を読み込むしようとしている

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

からあなたが得ている

Answer 2

エラーがありますfbdetailsがnullの場合、角度角度はスローされません。