Angular2 *ngIf 检查模板中的对象数组长度
Angular2 *ngIf check object array length in template
参考 https://angular.io/docs/ts/latest/guide/displaying-data.html and stack 仍然出现未定义的语法错误自身上下文。如果我删除 *ngIf 条件,那么如果我将一些值推入其中,我将在 teamMembers 中获取值,以便我可以访问 teamMembers 中的值。
我的 teamMember
对象是 [ ] array
我正在尝试检查条件数组的大小是否为空。
尝试次数:
<div class="row" *ngIf="(teamMembers | json) != '{}'">
和
<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
throwing syntax error
<div class="col-md-12">
<h4>Team Members</h4>
<ul class="avatar" *ngFor="let member of teamMembers">
<li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
</ul>
</div>
</div>
组件:
@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];
任何帮助都会很棒。
您可以使用 *ngIf="teamMembers != 0"
检查数据是否存在
<div class="row" *ngIf="teamMembers?.length > 0">
这首先检查 teamMembers
是否有值,如果 teamMembers
没有值,它不会尝试访问 undefined
的 length
因为条件的第一部分已经失败。
这篇文章帮助我弄清楚了为什么它对我也不起作用。它给了我一个教训,让我思考网页加载以及 angular 2 如何作为时间线进行交互,而不仅仅是我正在考虑的时间点。我没看到其他人提到这一点,所以我会...
需要 *ngIf 的原因是它会在 OnInit 的其余部分发生之前尝试检查该变量的长度,并抛出 "length undefined" 错误。所以这就是为什么你添加?因为它还不存在,但很快就会存在。
可能有点矫枉过正,但创建了库 ngx-if-empty-or-has-items 它检查对象、集合、映射或数组是否不为空。也许它会帮助某人。它具有与 ngIf 相同的功能(然后,支持 else 和 'as' 语法)。
arrayOrObjWithData = ['1'] || {id: 1}
<h1 *ngxIfNotEmpty="arrayOrObjWithData">
You will see it
</h1>
or
// store the result of async pipe in variable
<h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
{{obj.id}}
</h1>
or
noData = [] || {}
<h1 *ngxIfHasItems="noData">
You will NOT see it
</h1>
您可以使用
<div class="col-sm-12" *ngIf="event.attendees?.length">
没有event.attendees?.length > 0
甚至event.attendees?length != 0
因为?.length
已经returnboolean值。
如果数组中有内容,它将显示,否则不显示。
参考 https://angular.io/docs/ts/latest/guide/displaying-data.html and stack
我的 teamMember
对象是 [ ] array
我正在尝试检查条件数组的大小是否为空。
尝试次数:
<div class="row" *ngIf="(teamMembers | json) != '{}'">
和
<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
throwing syntax error
<div class="col-md-12">
<h4>Team Members</h4>
<ul class="avatar" *ngFor="let member of teamMembers">
<li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
</ul>
</div>
</div>
组件:
@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];
任何帮助都会很棒。
您可以使用 *ngIf="teamMembers != 0"
检查数据是否存在
<div class="row" *ngIf="teamMembers?.length > 0">
这首先检查 teamMembers
是否有值,如果 teamMembers
没有值,它不会尝试访问 undefined
的 length
因为条件的第一部分已经失败。
这篇文章帮助我弄清楚了为什么它对我也不起作用。它给了我一个教训,让我思考网页加载以及 angular 2 如何作为时间线进行交互,而不仅仅是我正在考虑的时间点。我没看到其他人提到这一点,所以我会...
需要 *ngIf 的原因是它会在 OnInit 的其余部分发生之前尝试检查该变量的长度,并抛出 "length undefined" 错误。所以这就是为什么你添加?因为它还不存在,但很快就会存在。
可能有点矫枉过正,但创建了库 ngx-if-empty-or-has-items 它检查对象、集合、映射或数组是否不为空。也许它会帮助某人。它具有与 ngIf 相同的功能(然后,支持 else 和 'as' 语法)。
arrayOrObjWithData = ['1'] || {id: 1}
<h1 *ngxIfNotEmpty="arrayOrObjWithData">
You will see it
</h1>
or
// store the result of async pipe in variable
<h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
{{obj.id}}
</h1>
or
noData = [] || {}
<h1 *ngxIfHasItems="noData">
You will NOT see it
</h1>
您可以使用
<div class="col-sm-12" *ngIf="event.attendees?.length">
没有event.attendees?.length > 0
甚至event.attendees?length != 0
因为?.length
已经returnboolean值。
如果数组中有内容,它将显示,否则不显示。