时间戳

首页 > 解决方案 > 不在 Angular 应用程序中显示嵌套值

angular - 不在 Angular 应用程序中显示嵌套值

问题描述

我有一个本地存储的 JSON 文件，然后有一个通过以下数据集发送的服务

[  
   {  
      "id":"73c624c9-6db7-4fd2-ac91-c1084aee0565",
      "etl":362,
      "subject":"Temp Subject",
      "body":"Temp Body",
      "deliveryAddress":"test@test.com",
      "accountNumber":"12345",
      "deliveryChannel":"EMAIL",
      "attachments":[  
         {  
            "id":"1",
            "attachToDeliveryMessage":false,
            "fileName":"12345-ITM-2019-01-25.pdf",
            "passwordProtected":true,
            "attachmentType":"ITEMISED_BILLING",
            "renderSucceeded":true,
            "renderError":null,
            "link":{  
               "href":"linky"
            }
         },
         {  
            "id":"2",
            "attachToDeliveryMessage":true,
            "fileName":"12345-INV-27608011279-2019-01-25.pdf",
            "passwordProtected":true,
            "attachmentType":"INVOICE",
            "renderSucceeded":true,
            "renderError":null,
            "link":{  
               "href":"linky"
            }
         }
      ],
      "renderSucceeded":true,
      "renderError":null
   },
]

我可以成功显示外部值，但难以显示嵌套值，如“附件”

这是我的 HTML

<div class="card-body" *ngFor="let item of customerAccountDocs">
  <p>{{item.id}}</p>
  <p>{{item.accountNumber}}
  <p>{{item.etl}}
  <p>{{item.subject}}
  <p>{{item.body}}
  <p>{{item.deliveryAddress}}
  <p>{{item.deliveryChannel}}
  <p *ngFor="let item of customerAccountDocs.attachments">{{item.id}}</p>
</div>

请帮助我。我只是使用引导程序来显示数据。

标签： angulartypescript

解决方案

你应该迭代item.attachments而不是customerAccountDocs.attachments

<div class="card-body" *ngFor="let item of customerAccountDocs">
  <p>{{item.id}}</p>
  <p>{{item.accountNumber}}
  <p>{{item.etl}}
  <p>{{item.subject}}
  <p>{{item.body}}
  <p>{{item.deliveryAddress}}
  <p>{{item.deliveryChannel}}
  <p *ngFor="let attachment of item.attachments">{{attachment.id}}</p>
</div>

推荐阅读