Angular 单击按钮从数据集中获取值

Angular 单击按钮从数据集中获取值,angular,Angular,我有下面的HTML,其中循环了一个数据集。当我点击按钮时,我想从数据集中获得一个特定的值,即id,以便我可以在TS中使用它 <div *ngFor="let item of assignmentlist; let i = index"> <mat-card> {{i}} <button mat-button class="primary" (click)="openImageProcess()"

我有下面的HTML,其中循环了一个数据集。当我点击按钮时,我想从数据集中获得一个特定的值,即
id
,以便我可以在TS中使用它

<div *ngFor="let item of assignmentlist; let i = index">
  <mat-card> {{i}}
    <button mat-button class="primary" (click)="openImageProcess()">Start image upload process for {{item.title}}</button>
  </mat-card>
</div>
[
  {
    "title": "bob",
    "codes": [
      "Basketball"
    ],
    "brief": "asdas",
    "locationId": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
    "startDate": "2020-07-08T00:00:00.000+0000",
    "endDate": "2020-07-10T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 22,
    "accreditationRequired": false,
    "accreditationReason": null,
    "subjects": "test",
    "editors": null,
    "imageId": null,
    "id": "b6b99931-c6a3-476a-8c3a-9e2535823c13",
    "status": "Created",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "requestedOn": null
    },
    "location": {
      "id": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
      "country": "Bhutan",
      "city": "Lhuentse"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "requestedOn": null
      }
    ],
    "contributorProfiles": []
  },
  {
    "title": "john",
    "codes": [
      "Basketball"
    ],
    "brief": "mithal",
    "locationId": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
    "startDate": "2020-06-26T00:00:00.000+0000",
    "endDate": "2020-07-09T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 33,
    "accreditationRequired": false,
    "accreditationReason": "none",
    "subjects": "dsf",
    "editors": null,
    "imageId": null,
    "id": "a3badc80-4316-48fc-be2d-3aa158f98035",
    "status": "Created",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "requestedOn": null
    },
    "location": {
      "id": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
      "country": "South Africa",
      "city": "Johannesburg"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "requestedOn": null
      }
    ],
    "contributorProfiles": []
  },
  {
    "title": "tom",
    "codes": [
      "Aquatics"
    ],
    "brief": "22",
    "locationId": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
    "startDate": "2020-06-24T00:00:00.000+0000",
    "endDate": "2020-07-02T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 222,
    "accreditationRequired": false,
    "accreditationReason": "none",
    "subjects": "222",
    "editors": null,
    "imageId": null,
    "id": "6add4d5f-24ed-4d64-92ff-87fffa7a0a20",
    "status": "Created",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "requestedOn": null
    },
    "location": {
      "id": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
      "country": "South Africa",
      "city": "Johannesburg"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "requestedOn": null
      }
    ],
    "contributorProfiles": []
  }
]
<div *ngFor="let item of assignmentlist; let i = index">
  <mat-card> {{i}}
    <button mat-button class="primary" (click)="openImageProcess(item.id)">Start image upload process for {{item.title}}</button>
  </mat-card>
</div>
openImageProcess(id){
   console.log(id);
}