CODEWITHSUNDEEP
angulartypescript
Anna Marie
Anna Marie

Reputation: 91

Angular 7 - How to get the data out of a table?

I am new to this forum, so if I violate any rules, please tell me!

I have following code in app.component.html:

<tr *ngFor="let item of items" (click)="getClient($event)">
    <td> {{ item.nr }} </td>
    <td> {{ item.content }} </td>
</tr>

In app.component.ts I get the data of an API:

export class AuftragslisteComponent implements OnInit {

    constructor(public http: HttpClient) { }

    getItem() {
        return this.http.get("http://localhost:59643/api/lösa");
    }

    items: Object;
    ngOnInit() {
        this.getItem().subscribe(data => {
            this.items = data;
            console.log(this.items);
            console.log(data);
        })
    }

    getClient() {
    }
}

I am try to get the item.nr by clicking a row, but I always got undefined by the alert function in the getClient function, so I deleted it.

Do anyone know how to access the correct item.nr by clicking a row?

Upvotes: 1

Views: 7964

Answers (3)

Franklin Pious
Franklin Pious

Reputation: 3848

template 

(click)="getClient(item.nr)"

ts

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

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41407

Pass the item as a parameter to the function 

(click)="getClient(item)

And access it from the function

getClient(item){
 console.log(item.nr)
}

Upvotes: 0

jitender
jitender

Reputation: 10429

Change

<tr *ngFor="let item of items" (click)="getClient($event)">

to

<tr *ngFor="let item of items" (click)="getClient(item.nr)">

then in your function

 getClient(nr){
      alert(nr)
   }

Upvotes: 3

Related Questions