Question

修改：
它并不奇怪，它不起作用。组织的* ngFor在我在下一个离子组中访问之前关闭，稍后在代码中关闭所有内容解决了我的问题。

我正在使用一个使用angular2的Ionic2应用程序。成功登录后，我转到下一个视图。在加载下一个视图时，我执行一个GET请求，它向我发送一个对象数组。

在我在Ionic1（角度1）中创建的旧应用程序中，我能够根据我即将收到的对象编写html文件。并且在收到数据之前它不会呈现。

昨晚我与Ionic2的新挣扎之后似乎每当我有一个* ng对一个未定义的变量它就不会加载。由于无法找到物业。

上下文代码：

<ion-item-group>                                                            
    <ion-item *ngFor="let organization of organizations"                    
        (click)="toggleDetails(organization)">                              
        <ion-icon item-left name="add">                                     
        </ion-icon>                                                         
        {{organization.Name}}                                               
    </ion-item>                                                             
    <ion-item-group>        
        <ion-item-divider *ngFor="let Assignment of organization.Assignments">                                         
            {{assignmentNameMaker(Assignment)}}                             
        </ion-item-divider>                                                 
    </ion-item-group>

我没有遇到第一个ngFor的问题，但这导致在加载时创建了一个空阵列组织。我试过了? elvis operator。虽然第一部分被加载，但我没有看到任何分区被加载。（也尝试过像＃34; lalalal＆＃34;）

修改：
它并不奇怪，它不起作用。组织的* ngFor在我在下一个离子组中访问之前关闭，稍后在代码中关闭所有内容解决了我的问题。

Answer 1

只需将字段添加到组件中，然后再分配一个值：

class MyComponent {
  organizations:any[];

}

*ngFor并不关心字段是否有值。稍后分配值或更改内容时，*ngFor会相应地更新DOM。

Answer 2

使用下面的代码，当“organization”为空时，它会自动排除元素。

*ngIf="organization"

Answer 3

您还可以使用?运算符进行空安全检查，如下所示。

    <ion-item-divider *ngFor="let Assignment of organization?.Assignments">
        {{assignmentNameMaker(Assignment)}}
    </ion-item-divider>

将?中使用的ngFor标记视为organization?.Assignments

Answer 4

class MyComponent {
  organizations:any[] = null; 
}

<ion-item-group *ngIf="organizations">                                                            
    <ion-item *ngFor="let organization of organizations"                    
        (click)="toggleDetails(organization)">                              
        <ion-icon item-left name="add">                                     
        </ion-icon>                                                         
        {{organization.Name}}                                               
    </ion-item>                                                             
    <ion-item-group>        
        <ion-item-divider *ngFor="let Assignment of organization.Assignments">                                         
            {{assignmentNameMaker(Assignment)}}                             
        </ion-item-divider>                                                 
    </ion-item-group>

* ng对尚未存在的数据结构

4 个答案: