关于angular：Angular2 * ngIf检查模板中的对象数组长度


Angular2 *ngIf check object array length in template

参考https://angular.io/docs/ts/latest/guide/displaying-data.html和堆栈如何使用* ngIf检查角度2模板中的空对象仍然得到语法错误自我上下文未定义。 如果我删除* ngIf条件，那么我在teamMembers中获取值，如果我将一些值推入其中，那么我可以访问teamMembers中的值。

我的teamMember对象是[ ] array我试图通过大小检查条件数组是否为空。

尝试：

1
 

和

1
2
3
4
5
6
7
8
9
10
11
12
 0"> //Check length great than
                                                 throwing syntax error
           
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                   
<li>
<gravatar-image [size]="80" [email]="member.email"></gravatar-image>
</li>

               
</ul>

零件 ：

1
2
3
4
5
@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

任何帮助都会很棒。

相关讨论

1
 0">

这首先检查teamMembers是否有值，如果teamMembers没有值，它不会尝试访问undefined的length，因为条件的第一部分已经失败。

相关讨论

您可以使用*ngIf="teamMembers != 0"检查数据是否存在

您可以使用

1
 

没有event.attendees?.length > 0或甚至event.attendees?length != 0

因为?.length已经返回布尔值。

如果在数组中它将显示它不会。

也许是轻微的矫枉过正，但是创建了库ngx-if-empty-or-has-items，它检查对象，集合，映射或数组是否为空。也许它会对某人有所帮助。它具有与ngIf相同的功能(然后，支持其他和'as'语法)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it


 or
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}


 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it

这篇文章帮助我弄清楚它为什么不适合我。它给了我一个教训，让我想到网页加载以及角度2如何作为时间轴交互，而不仅仅是我想到的时间点。我没有看到有人提到这一点，所以我会......

需要* ngIf的原因是因为它会在OnInit其余部分发生之前尝试检查该变量的长度，并抛出"length undefined"错误。这就是为什么你要添加？因为它还不存在，但很快就会存在。