*ngFor 覆盖尚不存在的数据结构答案

【问题标题】：*ngFor over not yet existing data structure*ngFor 覆盖尚不存在的数据结构
【发布时间】：2017-08-11 14:27:15
【问题描述】：

编辑：
它不起作用并不奇怪。组织的 *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。尽管第一部分已加载，但我没有看到任何分隔线被加载。（也尝试加入类似“lalalal”的东西）

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

【问题讨论】：

您还可以将async 管道与*ngFor 一起使用。 angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html

标签： angular ionic-framework ionic2 ngfor

【解决方案1】：

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

class MyComponent {
  organizations:any[];

}

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

【讨论】：

“加载时创建了一个空数组组织” ^^

【解决方案2】：

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

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

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

【讨论】：

虽然我相信@Günter Zöchbauer 的解决方案是最好的。

【解决方案3】：

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>

【讨论】：

【解决方案4】：

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

*ngIf="organization"

【讨论】：

一个标签上不能有多个结构指令。您需要将 *ngFor 和 *ngIf 拆分为两个标签。
@GünterZöchbauer 我同意你的观点，我们不能遵循这种结构，因此我编辑了我的答案。虽然我们可以使用这个指令来达到目的。