首页 文章

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

提问于
浏览 次
55

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

任何帮助都会很棒 .

angular angular2-template

4 回答

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

    这首先检查 teamMembers 是否有值，如果 teamMembers 不't have a value, it doesn't尝试访问 length undefined ，因为条件的第一部分已经失败 .

    回复于
  • 14

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

    回复于
  • -1

    也许是轻微的矫枉过正但是创建了库ngx-if-empty-or-has-items它检查对象，集合，映射或数组是否为空 . 也许它会对某人有所帮助 . 它具有与ngIf相同的功能（然后，支持其他和'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>
    回复于
  • 0

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

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

    回复于

相关问题