javascript - 当两个数组中的 idItem 相同时选中复选框

Question

我有两个数组。一个数组是一组图像，一个数组是一组数据。

当两个数组中的IDItem相同时，有没有办法检查复选框？

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)
}

在本例中，IDItem 1 和 2 出现在项目和数据数组中。有没有办法让这些项目将复选框标记为已选中？

Answer 1

您可以通过创建一个函数来检查当前 product.IDItem 是否存在于 data 数组中的任何对象中来实现此目的，如果存在，将复选框的 value 属性设置为 true。

TS (ES2016+)

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

TS(ES2016 之前)

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

如果您传入的 productId 作为 IDItem 存在于 this 中的任何对象中，则将返回 true .data数组

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>