从按钮切换json值（单击）

Question

I'm new in JavaScript and Angular and I'm trying to get a json value from a single button(click) event.

My code looks like this:

HTML code:

<button (click)="generatePdf(this.mockData)">Download PDF</button>

JSON code:

public mockData = [
{
      "_id": 1,
      "heading": {
        "department_id": 1,
        "address_info": "123 Street",
        "date": "Mar 20, 2020"
      },
      "greeting": "Greetings!",
      "body": "This is a sample text",
      "closing": "Sincerely,",
      "signature": "John Doe"
    },
    {
      "_id": 2,
      "heading": {
        "department_id": 2,
        "address_info": "456 Street",
        "date": "Feb 20, 2020"
      },
      "greeting": "Good Day",
      "body": "This is a sample text",
      "closing": "Sincerely,",
      "signature": "Sarah Jane"
    }]

Currently, I have a html file where all data is displayed from JSON value. What I'm trying to do is get each json value and link it to each button in the html file. Any help would be greatly appreciated, Thanks!!

Answer 1

Try:

<div *ngFor="let data of mockData ">
    <button (click)="generatePdf(data)">Download PDF for {{data.signature}}</button>
</div>

and in component code:

generatePdf(data){
    console.log(data)
}

Note: Do not use this when working on HTML code. this is used to access variable that are within the scope of the component in ts files