[英]Angular2 *ngIf check object array length in template
Refered to https://angular.io/docs/ts/latest/guide/displaying-data.html and stack How to check empty object in angular 2 template using *ngIf still getting syntax error self context undefined. 请参阅https://angular.io/docs/ts/latest/guide/displaying-data.html并堆栈如何使用* ng检查angular 2模板中的空对象如果仍然遇到语法错误,则自身上下文未定义。 If I remove *ngIf condition then I am getting values in teamMembers if I push some value into it so I can access values in teamMembers.
如果删除* ngIf条件,那么如果我向其中推送一些值,那么我将在teamMembers中获取值,以便可以访问teamMembers中的值。
my teamMember
object is [ ] array
i am trying to check condition array is empty by size. 我的
teamMember
对象是[ ] array
我正在尝试检查条件数组的大小是否为空。
Tries : 尝试:
<div class="row" *ngIf="(teamMembers | json) != '{}'">
and 和
<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 : 零件 :
@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];
Any help would be great. 任何帮助都会很棒。
<div class="row" *ngIf="teamMembers?.length > 0">
这首先检查teamMembers
是否具有值,以及teamMembers
没有值,因为条件的第一部分已经失败,所以它不会尝试访问undefined
length
。
您可以使用*ngIf="teamMembers != 0"
来检查是否存在数据
You can use 您可以使用
<div class="col-sm-12" *ngIf="event.attendees?.length">
Without event.attendees?.length > 0
or even event.attendees?length != 0
没有
event.attendees?.length > 0
甚至没有event.attendees?length != 0
Because ?.length
already return boolean value. 因为
?.length
已经返回布尔值。
If in array will be something it will display it else not. 如果在数组中将是某些东西,它将不显示。
Maybe slight overkill but created library ngx-if-empty-or-has-items it checks if an object, set, map or array is not empty. 也许有些矫kill过正,但是创建了库ngx-if-empty-or-has-items,它检查对象,集合,映射或数组是否为空。 Maybe it will help somebody.
也许会帮助别人。 It has the same functionality as ngIf (then, else and 'as' syntax is supported).
它具有与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>
This article helped me alot figuring out why it wasn't working for me either. 这篇文章帮助我弄清楚了为什么它对我也不起作用。 It give me a lesson to think of the webpage loading and how angular 2 interacts as a timeline and not just the point in time i'm thinking of.
它给了我一个教训,让我思考一下网页的加载以及角度2作为时间轴的交互方式,而不仅仅是我正在考虑的时间点。 I didn't see anyone else mention this point, so I will...
我没有看到其他人提到这一点,所以我会...
The reason the *ngIf is needed because it will try to check the length of that variable before the rest of the OnInit stuff happens, and throw the "length undefined" error. 需要* ngIf的原因是因为它将尝试在其余OnInit东西发生之前检查该变量的长度,并引发“ length undefined”错误。 So thats why you add the ?
那就是为什么您要添加? because it won't exist yet, but it will soon.
因为它尚不存在,但很快就会出现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.