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

Question

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

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

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

在我昨晚与 Ionic2 的新斗争之后，似乎每当我在未定义的变量上有一个 *ngFor 时，它就不会加载。由于无法找到房产。

上下文代码：

<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.尽管第一部分已加载，但我没有看到任何分隔器正在加载。(也尝试只是输入"拉拉拉尔"之类的东西)

编辑：
它不起作用并不奇怪。 组织的 *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>