NgFor/NgIf中的Angular 2对象插值问题
Angular 2 Object Interpolation Issue in NgFor/NgIf
我有一个用户对象数组的*ngFor
。在此ngFor
中是一个带有*ngIf
的div,并且在此div中,是一个带有插入src
属性的<img>
标记。
<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不应该显示。这适用于几乎所有的用户(大多数没有详细信息)。这意味着没有填充绑定{{user.fbdetails.picture.data.url}}
的内插值,但是如果没有fbdetails
, *ngIf
应该阻止这些绑定存在。然而,我仍然得到一个Cannot read property "picture" of undefined
错误,即使这应该永远不会发挥作用,因为*ngIf
。
这是我在Angular 1中经常做的事情,所以我不确定发生了什么。
使用安全导航操作符应该可以解决您的问题
<i *ngIf="!user.fbdetails?.picture?.data?.url"
这样,如果fbdetails
是null
, Angular就不会抛出异常。
从
获取错误 <i *ngIf="!user.fbdetails.picture.data.url" class="material-icons" style="font-size: 60px; color: white !important; display: inline-block; float: right;">people</i>
正在尝试从user.fbdetails读取图片
相关文章:
- Undercore.js获取对象数组中键对象的值
- 如何通过json对象数组为嵌套对象赋值
- 使用lodash的特定对象特性值
- JavaScript:点击事件中对象的值
- 将javascript对象(属性+值)合并到一个对象中
- 谷歌地图的插值方法
- 如何在我传递给视图的ViewModel集合中获得jQuery可选对象的值,以作为有序列表进行迭代
- SVG实现的单调三次插值没有像d3这样的库
- 无法使用.bind更改分配给此对象的值
- 设置选项对象关键点:值对以实现带第二个y轴的动态打印
- AngularJS ngTranscluded、angular.noop和插值VS表达式
- AngularJS错误:$interpolate:$routeParams的interr插值错误
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- Vue.js-插值错误-如何将样式修改为v-bind:style
- 尝试在一个对象的值和一个对象数组之间进行匹配
- sequelize为找到的对象添加值
- 从主体分离时,jQuery对象scrollTop(值)
- 如何根据单击访问相应对象的值
- 如何在 JavaScript 中访问函数中的其他属性值作为对象属性值
- NgFor/NgIf中的Angular 2对象插值问题