CODEWITHSUNDEEP
angular
Shaugi
Shaugi

Reputation: 529

Angular binding data array of object

how to binding this data

    export const CEK: Cek[] = [
  {
    id : 1,
    name : 'one',
    arr : [{lat : 123, long:3212}]
  },
  {
    id : 2,
    name : 'two',
    arr : [{lat : 123, long:3212}]
  },
];

i have try binding data like this 

<tr *ngFor="let data of datacek">
        <td> {{data.id}} </td>
        <td> {{data.name}}</td>
        <td> {{data.arr[lat]}} {{data.arr[long]}} </td>
    </tr>

^ data.arr[lat] or data.arr[lat] is not showing anything

or i have try this way

<tr *ngFor="let data of datacek">
        <td> {{data.id}} </td>
        <td> {{data.name}}</td>
        <td> {{data.arr}}</td>
    </tr>

and the result only showing [object Object]

any idea how to binding my case of data ?

Upvotes: 0

Views: 85

Answers (3)

Sandip Jaiswal
Sandip Jaiswal

Reputation: 3720

Use following code:

<tr *ngFor="let data of datacek">
    <td> {{data.id}} </td>
    <td> {{data.name}}</td>
    <td> {{data.arr[0].lat}} {{data.arr[0].long}} </td>
</tr>

Let me know is it solved your issue.

Upvotes: 1

Vu Quyet
Vu Quyet

Reputation: 1705

it should be: 

<td> {{data.arr[0].lat}} {{data.arr[0].long}} </td>

Upvotes: 1

Ashraful Islam
Ashraful Islam

Reputation: 1263

Use arr property as object then it will work with your existing templating.

export const CEK: Cek[] = [
  {
    id : 1,
    name : 'one',
    arr : {lat : 123, long:3212}
  },
  {
    id : 2,
    name : 'two',
    arr : {lat : 123, long:3212}
  },
];

Otherwise use index for arr array

<td> {{data.arr[0].lat}} {{data.arr[0].long}} </td>

You declared the property as array and using it like an object. This is the problem.

Upvotes: 3

Related Questions