Angular2 * ng如果检查模板中的对象数组长度


89

请参阅https://angular.io/docs/ts/latest/guide/displaying-data.html并堆栈如何使用* ng检查angular 2模板中的空对象如果仍然遇到语法错误,则自身上下文未定义。如果我删除* 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[];

任何帮助都会很棒。


“引发语法错误”的确切错误消息是什么?
君特Zöchbauer

原来的例外:TypeError:self.context.teamMembers不是* ngIf =“ teamMembers.length> 0”的函数,我将尝试使用下面的答案1 min pls
Karthigeyan Vellasamy

Answers:


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

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


3
这是指向以下位置的正确链接safe navigation operatorangular.io/guide/template-syntax#safe-navigation-operator
Michael Czechowski

这可能会导致运算符'>'无法应用于类型'boolean'和'number'。同时使用--aot或prod优化构建时
krish

18

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


2

也许有些矫kill过正,但创建了库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>

1

您可以使用

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

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

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

如果在数组中将是某些东西,它将不显示。


0

这篇文章帮助我弄清楚了为什么它对我也不起作用。它给了我一个教训,让我思考一下网页的加载以及角度2作为时间轴的交互方式,而不仅仅是我正在考虑的时间点。我没有看到其他人提到这一点,所以我会...

需要* ngIf的原因是因为它将尝试在OnInit其余部分发生之前检查该变量的长度,并引发“ length undefined”错误。那就是为什么您要添加?因为它尚不存在,但很快就会出现。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.