0

I have a running Angular application and want to send the data on click from html template as:

.ts

columns: [
           { label: 'User Name', key: 'Name' },
           { label: 'User Age', key: 'Age' }
         ]

data: [
    {Name: 'John', Age: 12},
    {Name: 'Sam', Age: 34},
    {Name: 'Jack', Age: 15}
]

onClick(data) {
   console.log(data);
}

html

<div *ngFor="let row of data">
     <div *ngFor="let column of columns" (click)="onClick(row[column.key])">
         {{ row[column.key] }}
      </div>
</div>

But, I am not able to fetch the data and getting value as undefined. Please help me on this

Asif Zaidi
  • 123
  • 3
  • 20
  • Does this answer your question? [access key and value of object using \*ngFor](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) – Dalorzo Jul 07 '20 at 20:01
  • what is the `{{ row[column.key] }}` in the template showing you? is it also showing "undefined"? get that to work first... then your onClick will follow – Nicholas Franceschina Jul 07 '20 at 20:03

2 Answers2

1

Assignment operator is = to not :

u want to assign arrays to columns and data so u should use =

columns = [
           { label: 'User Name', key: 'Name' },
           { label: 'User Age', key: 'Age' }
         ]

data= [
    {Name: 'John', Age: 12},
    {Name: 'Sam', Age: 34},
    {Name: 'Jack', Age: 15}
]

enter image description here

hanan
  • 1,768
  • 1
  • 14
  • 19
1

I made small change, I hope it will work for you.

Example: https://codesandbox.io/s/angular-01wg3

columns= [
           { label: 'User Name', key: 'Name' },
           { label: 'User Age', key: 'Age' }
         ]

data= [
    {Name: 'John', Age: 12},
    {Name: 'Sam', Age: 34},
    {Name: 'Jack', Age: 15}
]

onClick(data) {
   console.log(data);
}
<div *ngFor="let row of data">
     <div *ngFor="let column of columns" (click)="onClick(row[column.key])">
         {{ row[column.key] }}
      </div>
</div>
GMKHussain
  • 3,342
  • 1
  • 21
  • 19