在Angular应用中不显示嵌套值

时间:2019-02-11 06:45:44

标签: angular typescript

我有一个本地存储的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>

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

1 个答案:

答案 0 :(得分:2)

您应该遍历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>