javascript - 如何在 Angular/TypeScript UI 中显示从后端接收到的 Java map 数据？

Question

我有多个行(key1，key2)来自变量“detailsMap:any”中的后端，需要在 UI 上显示。请建议如何在 Tyscript/angular2 中执行操作

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

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

需要在固定静态模板中显示为如下内容/访问。尽管下面的示例不起作用。收到错误 'Test.html:7 ERROR TypeError: Cannot read property 'key1' of undefined

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

Answer 1

您必须首先使用对象Mapper将java map 数据转换为json对象数组，然后将数据发送到Angular。然后，您可以简单地循环从服务器接收的 json 对象数组并将其显示在 UI 中。

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