如何在angular/typescript UI显示从后端接收的java地图数据？

问题描述：

我有多个行（如key1，key2）在后端来自可变的'detailsMap：any'，需要在UI上显示。请建议在Typscript/angular2如何在angular/typescript UI显示从后端接收的java地图数据？

key1 : { Name:'ABC' , address :'JKL street 123', phone:'' }

key2 : { Name:'QER' , address :'STR street 123', phone:'888888888' }

怎么办需要显示为类似下面/接入在一个固定的静态模板。虽然下面的示例不起作用。获取误差“的test.html：7错误类型错误：无法读取属性‘的未定义

key1的’

<div > 
     <div >{{ 
     detailsMap['key1'].Name}}</div> 
     <div >{{ 
     detailsMap['key1'].address}}</div> 
    </div> 
    <div > 
     <div >{{ 
     detailsMap['key2'].Name}}</div> 
     <div >{{ 
     detailsMap['key2'].address}}</div> 
    </div>

寻求调试帮助的问题（“为什么这个代码不工作？”）必须包含所需的行为，特定的问题或错误以及在问题本身中重现问题所需的最短代码。没有明确问题陈述的问题对其他读者无益。请参阅：如何创建[mcve]。使用“编辑”链接来改善你的*问题* - 不要通过评论添加更多信息。谢谢！ – GhostCat

答

您必须首先使用对象映射了Java地图数据转换成JSON对象的数组然后将数据发送到角度。然后，您可以简单地遍历从服务器接收的json对象数组，并将其显示在UI中。

<div *ngFor="let item of items"> 
    <div> item.name </div> 
    <div> item.address </div> 
</div>

需要先维护key1数据然后key2的元素的显示顺序。后端可以按任何顺序发送数据。 –

您可以随时对数据进行排序，Object Mapper将维护数据的顺序。如果您无法根据现有数据对数据进行排序，那么我建议您添加一个新的“ID”字段， –

答

问题已解决，由于错误，数组的'detailsMap'对模板不可见。

如何在angular/typescript UI显示从后端接收的java地图数据？

相关推荐