比较两个对象数组，检查匹配的值

Question

如果在2个对象中存在匹配，我们如何将表上的复选框默认设置为选中?。我有2个对象1是selectedNewUser数组的对象和transactionUserTable。来自api的数据数组。

我想比较如果每个emailAddress在transactionUserTable。对象的数据数组中有匹配的emailAddress的selectedNewUser对象数组，如果有匹配或emailAddress相等，则设置复选框值为checked

谁能帮我一下这怎么可能?如果有人有任何解决方案或想法。谢谢你，祝你今天愉快。

比较selectedNewUser emailAddress和transactionUserTable的每个对象。数据emailAddress

#新增用户

selectedNewUser = [
{
"emailAddress": "[e-mail]",
"firstName": "aa",
"lastName": "aa",
"phoneNumber": "232",
"companyName": "bb",
"title": "CEO",
"roleId": 7,
"associatedAccount": "WLGRN",
"accountId": 4,
"roles": [
{
"id": 12,
"name": "Architect",
"isShow": true,
"transactionRoleId": 12
},
{
"id": 11,
"name": "Construction Project Director",
"isShow": true,
"transactionRoleId": 11
}
]
},
{
"emailAddress": "[e-mail]",
"firstName": "bb",
"lastName": "vv",
"phoneNumber": "34",
"companyName": "test",
"title": "CEO",
"roleId": 7,
"associatedAccount": "WLGRN",
"accountId": 4,
"roles": [
{
"id": 12,
"name": "Architect",
"isShow": true,
"transactionRoleId": 12
},
{
"id": 11,
"name": "Construction Project Director",
"isShow": true,
"transactionRoleId": 11
}
]
}
]

#html复选框代码

<div class="table" [ngStyle.gt-md]="{'overflow': 'auto'}">

<mat-table [dataSource]="transactionUserTable.dataSource" [@animateStagger]="{value:'50'}" matMultiSort
(matSortChange)="transactionUserTable.onSortEvent()">
<!-- action Column -->
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef> Action - Checkbox</mat-header-cell>
<mat-cell *matCellDef="let item" fxLayoutAlign="center center">
<mat-checkbox [checked]="userSelectedStatus(item)" color="primary" [disableRipple]="true"
(change)="appendUserList($event,item)"></mat-checkbox>

</mat-cell>
</ng-container>

#获取用户列表的代码

private _transactionUserPageEvent() {
this.isTransactionUserLoading = true;
this.transactionUserTable.data = [];
this._userProfileService.getUserProfileTableDropdown(
this.accountId,
this.transactionUserTable.pageIndex + 1,
this.transactionUserTable.pageSize,
this.searchTransactionUserInput.nativeElement.value,
this.transactionUserTable.sortParams,
this.transactionUserTable.sortDirs
)
.pipe(
finalize(() => this.isTransactionUserLoading = false)
)
.subscribe({
error: err => this._notificationService.showError(err),
next: res => {
console.log("new users"  , this.selectedNewUser)
this.transactionUserTable.totalElements = res.totalItemCount;
this.transactionUserTable.data = res.items as UserProfileDropdownDto[];
this.totalData = res.totalItemCount;
this.currentDisplayedData = res.lastItemOnPage;
},
complete: noop
});
}

#从api (transactionUserTable.data)中获取用户列表的示例数据

[
{
"id": 90085,
"fullName": "1a 1a",
"roleDisplay": null,
"firstName": "1a",
"lastName": "1a",
"emailAddress": "[e-mail]",
"phoneNumber": "fsdfsd",
"companyName": "test",
"title": "CEO",
"lastLogin": null,
"createdDate": "08/08/2021 11:20:25 pm",
"isVerified": false,
"roleDto": null,
"status": "Active",
"securityRole": "Unlicensed User",
"lastLoggedIn": "",
"teamCount": 0,
"transactionRoleList": null
},
{
"id": 90086,
"fullName": "1a 1bb",
"roleDisplay": null,
"firstName": "1a",
"lastName": "1bb",
"emailAddress": "[e-mail]",
"phoneNumber": "32423",
"companyName": "dcbvc",
"title": "vsvfd",
"lastLogin": null,
"createdDate": "08/08/2021 11:25:59 pm",
"isVerified": false,
"roleDto": null,
"status": "Active",
"securityRole": "Unlicensed User",
"lastLoggedIn": "",
"teamCount": 0,
"transactionRoleList": null
},
{
"id": 90084,
"fullName": "1aaa aaa",
"roleDisplay": null,
"firstName": "1aaa",
"lastName": "aaa",
"emailAddress": "[e-mail]",
"phoneNumber": "asdas",
"companyName": "dfvdf",
"title": "CEO",
"lastLogin": null,
"createdDate": "08/08/2021 10:32:49 pm",
"isVerified": false,
"roleDto": null,
"status": "Active",
"securityRole": "Unlicensed User",
"lastLoggedIn": "",
"teamCount": 0,
"transactionRoleList": null
},
{
"id": 40108,
"fullName": "[e-mail] [e-mail]",
"roleDisplay": null,
"firstName": "[e-mail]",
"lastName": "[e-mail]",
"emailAddress": "[e-mail]",
"phoneNumber": "1",
"companyName": "[e-mail]",
"title": "[e-mail]",
"lastLogin": null,
"createdDate": "06/08/2021 1:22:50 pm",
"isVerified": false,
"roleDto": null,
"status": "Active",
"securityRole": "Unlicensed User",
"lastLoggedIn": "",
"teamCount": 0,
"transactionRoleList": null
},
{
"id": 70083,
"fullName": "23 asdasd",
"roleDisplay": null,
"firstName": "23",
"lastName": "asdasd",
"emailAddress": "asdasasdas",
"phoneNumber": "adasda",
"companyName": "asdasd",
"title": "assdasda",
"lastLogin": null,
"createdDate": "08/08/2021 7:28:05 pm",
"isVerified": false,
"roleDto": null,
"status": "Active",
"securityRole": "Unlicensed User",
"lastLoggedIn": "",
"teamCount": 0,
"transactionRoleList": null
}
]

Answer 1

在您的UserProfileDropdownDto中添加一个名为checked的属性，并在初始化它时默认为false。然后在getUserProfileTableDropdown的subscribe中通过res.items循环

res.items.forEach(item => {
if(item.emailAddress && selectedNewUser.findIndex((x: any) => x.emailAddress === item.emailAddress) !== -1){
item.checked = true;
}
});

然后将您的垫子复选框代码更新为:

<mat-checkbox [checked]="item.checked" color="primary" [disableRipple]="true" (change)="appendUserList($event,item)"></mat-checkbox>