Question

提到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[];

任何帮助都会很棒。

Answer 1

teamMembers

首先检查teamMembers是否有值，如果length没有值，则不会尝试访问undefined Dim i As Integer For i = 1 To 4 Step 1 Cells(1, 1).EntireColumn.Copy Destination:=Cells(1, i).EntireColumn Next i因为第一个{{1}}部分情况已经失败。

Answer 2

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

Answer 3

您可以使用

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

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

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

如果数组中有东西，它将不显示。

Answer 4

也许有些矫over过正，但创建了库ngx-if-empty-or-has-items，它会检查对象，集合，映射或数组是否为空。也许会帮助别人。它具有与ngIf相同的功能（然后，支持else和'as'语法）。

Try

Answer 5

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

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

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

5 个答案: