Angular2 *ngIf 检查模板中的对象数组长度答案

【问题标题】：Angular2 *ngIf check object array length in templateAngular2 *ngIf 检查模板中的对象数组长度
【发布时间】：2016-09-29 07:52:34
【问题描述】：

参考https://angular.io/docs/ts/latest/guide/displaying-data.html 和堆栈How to check empty object in angular 2 template using *ngIf 仍然收到语法错误自身上下文未定义。如果我删除 *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[];

任何帮助都会很棒。

【问题讨论】：

“抛出语法错误”具体的错误信息是什么？
原始异常：TypeError：self.context.teamMembers 不是 *ngIf="teamMembers.length > 0" 的函数，我将在 1 分钟后尝试以下答案

标签： angular angular2-template

【解决方案1】：

<div class="row" *ngIf="teamMembers?.length > 0">

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

【讨论】：

这里是safe navigation operator的正确链接：angular.io/guide/template-syntax#safe-navigation-operator
这可能会抛出 Operator '>' 不能应用于类型 'boolean' 和 'number'。同时使用 --aot 或 prod 优化构建

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以使用

<div class="col-sm-12" *ngIf="event.attendees?.length">

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

因为?.length 已经返回boolean 值。

如果在数组中是某物，它将显示它，否则不显示。

【讨论】：

【解决方案4】：

可能有点矫枉过正，但创建了库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>

【讨论】：

【解决方案5】：

这篇文章帮助我弄清楚为什么它对我也不起作用。它给了我一个教训，让我想到网页加载以及 angular 2 如何作为时间线进行交互，而不仅仅是我正在考虑的时间点。我没有看到其他人提到这一点，所以我会......

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

【讨论】：