Angular 单击按钮从数据集中获取值
我有下面的HTML,其中循环了一个数据集。当我点击按钮时,我想从数据集中获得一个特定的值,即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()"
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);
}