javascript - NgFor/NgIf 中的 Angular 2 对象插值问题

Question

这个问题已经有答案了:

Error if don't check if {{object.field}} exists (1 个回答)

已关闭 6 年前。

我有一个*ngFor用于 User 对象的数组。里面这个ngFor是一个带有 *ngIf 的 div ，在这个 div 中，是一个 <img>带有插值的标签 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>

现在是包裹 <img> 的 div如果没有 user.fbdetails 则不应显示在对象层次结构中。这适用于几乎所有相关用户(大多数没有 f​​bdetails)。这意味着绑定(bind)的内插值 {{user.fbdetails.picture.data.url}}未填充，但*ngIf如果没有 fbdetails 则应防止这些绑定(bind)出现。但是，我仍然得到 Cannot read property "picture" of undefined错误，尽管由于*ngIf而永远不会发挥作用。 。

这是我在 Angular 1 中经常做的事情，所以我不确定发生了什么。

Answer 1

使用安全导航操作符应该可以解决您的问题

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

这样，如果 fbdetails 为 null，Angular 就不会抛出异常。