How to display java map data received from backend at angular /typescript UI?

Question

I have multiple rows as such (key1,key2) below coming from backend in a varaible 'detailsMap : any' ,which need to display at UI. Please suggest how can do in Typscript/angular2

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

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

Need to show as something/access like below in a fixed static template. Though below sample is not working. Get error as '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

You will have to first convert the java map data to array of json object using object Mapper and then send the data to angular. Then you can simply loop over array of json object received from server and display it in UI.

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

Answer 2

问题已解决，因为错误，模板无法看到“ detailsMap”数组。