Question

这是我的JSON数组：

"user" : {
   "id": 456,
   "nickname": "xxx",
   "pf": {
        "id": 123,
        "account": [
            {
                "accountid": 1494235749,
                "status": "New",
                "accountnbr": 12345,
                "cyc": {
                    "cycid": 1494404053,
                    "active": true,
                    "status": "New",
                    "name": "QST192017",
                },

            },
            {
                "accountid": 1494403399,
                "status": "New",
                "accountnbr": 915177,
                "cyc": {
                    "cycleid": 1494406299,
                    "active": true,
                    "status": "Closed",
                    "name": "QSL342014"
                }
            },
            {
                    "accountid": 1494500399,
                    "status": "New",
                    "accountnbr": 90010,
            }
        ]
     },
}

这就是我在模板中的内容：

 <tr *ngFor="let account of accounts">
            <td>{{ account.accountnbr }}</td>
            <td>{{ account.cyc.name}}</td>
 </tr>

我尝试检索所有帐户的列表，正如您可以看到其中一个帐户没有循环，并显示错误，是否知道如何在列表中将缺少的JSON对象替换为空？

PS：我使用angular2

谢谢。

/ K

Answer 1

这就像使用*ngIf：

一样简单

<div *ngFor="let acc of account">
    <div *ngIf="!acc.cyc">NO CYC ON THIS ACCOUNT</div>
</div>

为此目的，缺席的对象是 null / undefined。

您还可以映射组件中的对象并将其设置为null：

account.map(x =>{
    if(!x.cyc){
        x.cyc = null;
    }
    return x;
});

Answer 2

使用account.cyc?.name将解决您的问题。当account没有cyc时，您的模板只显示空白而没有任何错误。

请参阅safe-navigation-operator(?)的文档。

<tr *ngFor="let account of accounts">
  <td>{{ account.accountnbr }}</td>
  <td>{{ account.cyc?.name}}</td>
</tr>

使用缺少的Object检索JSON列表，并使用Angular2将它们替换为null

2 个答案: