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

Kar*_*amy 77 angular2-template angular

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

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

尝试:

<div class="row" *ngIf="(teamMembers | json) != '{}'">
Run Code Online (Sandbox Code Playgroud)

<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>
Run Code Online (Sandbox Code Playgroud)

零件 :

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];
Run Code Online (Sandbox Code Playgroud)

任何帮助都会很棒.

Gün*_*uer 254

<div class="row" *ngIf="teamMembers?.length > 0">
Run Code Online (Sandbox Code Playgroud)

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

  • 这是指向“安全导航操作员”的正确链接:https://angular.io/guide/template-syntax#safe-navigation-operator (2认同)

Ais*_*App 16

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


Dru*_*lan 5

您可以使用

<div class="col-sm-12" *ngIf="event.attendees?.length">
Run Code Online (Sandbox Code Playgroud)

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

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

如果在数组中将是一些东西,它将显示它否则不会。