Check checkbox when idItem is the same in both arrays

1 answer

I have a two arrays. An array that is a set of images and an array that is a set of data.

Is there a way to check the checkbox when the IDItem in the two arrays are the same?

DEMO

.html

<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">     <ng-container *ngFor="let product of items; let  j = index;">         <li class="mdc-image-list__item">             <div class="mdc-image-list__image-aspect-container">                         <img [src]="product.image" class="mdc-image-list__image">             </div>             <div class="mdc-image-list--with-text-protection">                 <div class="mdc-image-list__supporting mdc-image-list__supporting">                     <span class="mdc-image-list__label">{{product.name}}</span>                 </div>                 <div class="Info">                     <dx-check-box (onValueChanged)="change($event);" [value]="false"></dx-check-box>                 </div>             </div>         </li>     </ng-container> </ul> 

.TS

items=[   {     ID:1,     IDItem:1,    image:"https://material-components-web.appspot.com/images/photos/2x3/3.jpg",    name:"name1" },   {     ID:2,     IDItem:2,    image:"https://material-components-web.appspot.com/images/photos/3x2/10.jpg",    name:"name2" },   {     ID:3,     IDItem:3,    image:"https://material-components-web.appspot.com/images/photos/2x3/6.jpg",    name:"name3" }, ]  data=[  {     ID:1,     IDItem:1, },   {     ID:2,     IDItem:2, },]  change(e){   console.log(e) } 

enter image description here

In this case, IDItem 1 and 2 are present in the items and data arrays. Is there a way for these items to mark the checkbox as checked?

All answers to this question, which has the identifier 60855511

The best answer:

You could achieve this by making a function to check if the current product.IDItem is present in any of the objects in the data array, and if it is, set the value property of your checkbox to true.

TS (ES2016+)

isProductInData( productId ) {    const dataIds = this.data.map( i => i.IDItem );    return dataIds.includes( productId ); } 

TS (Pre-ES2016)

isProductInData( productId ) {    const dataIds = this.data.map( i => i.IDItem );    return dataIds.indexOf( productId ) !== -1; } 

This will return true if the productId you pass in exists as a IDItem in any object in the this.data array

HTML

<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">     <ng-container *ngFor="let product of items; let  j = index;">         <li class="mdc-image-list__item">             <div class="mdc-image-list__image-aspect-container">                         <img [src]="product.image" class="mdc-image-list__image">             </div>             <div class="mdc-image-list--with-text-protection">                 <div class="mdc-image-list__supporting mdc-image-list__supporting">                     <span class="mdc-image-list__label">{{product.name}}</span>                 </div>                 <div class="Info">                     <dx-check-box (onValueChanged)="change($event);"                                    [value]="isProductInData( product.IDItem )">                     </dx-check-box>                 </div>             </div>         </li>     </ng-container> </ul> 

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data