从按钮切换json值（单击）

Question

我是JavaScript和Angular的新手，我试图通过单个按钮（单击）事件获取json值。

我的代码看起来像这样：

HTML代码：

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

JSON代码：

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"
    }]

目前，我有一个html文件，其中所有数据都显示在JSON值中。 我要做的是获取每个json值并将其链接到html文件中的每个按钮。 任何帮助将不胜感激，谢谢！

Answer 1

尝试：

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

并在组件代码中：

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

注意：处理HTML代码时请勿使用this 。 this用于访问ts文件中组件范围内的变量