如何使用两个数组将复选框的值设置为 true？答案

【问题标题】：How to set value of checkbox to true using two arrays?如何使用两个数组将复选框的值设置为 true？
【发布时间】：2020-05-22 02:41:39
【问题描述】：

我有两个数组

Array 1 -> ["Drug", "Kerosene", "Petrol"]
Array 2 -> ["Kerosene", "Drug"]

我的阵列 1 保存所有材料数据，阵列 2 是用户选择的材料。因此，下次当用户打开表单时，我希望将数组 1 填充为复选框并将数组 2 的元素设置为用户已选择的 true（复选框已选中）

如何在 JavaScript / Typescript 中实现这一点？

非常感谢任何帮助。

提前致谢。下面是填充所有复选框的代码。我希望在加载时检查数组 2 中存在的元素。

<div class="col-md-4" *ngFor="let material of sarr_materialType">
                  <div class="pretty p-svg p-curve" style="font-size:14px">
                    <input type="checkbox" (change)="onSelectMaterialType(material, $event.target.checked)" />
                    <div class="state p-primary">
                      <svg class="svg svg-icon" viewBox="0 0 20 20">
                        <path
                          d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                          style="stroke: white;fill:white;"></path>
                      </svg>
                      <label> {{material}}</label>
                    </div>
                  </div>
                </div>

【问题讨论】：

为什么需要 svg？
所以数组 1 中的每个项目都会有一个复选框列表，如果该项目存在于数组 2 中，则会检查这些框。对吗？
完全正确

标签： javascript arrays angular typescript checkbox

【解决方案1】：

可以这样做：

<div *ngFor="let item of arr1">
    <input type="checkbox"  [checked]="arr2.includes(item)">
      {{item}}
</div>

Working Demo

【讨论】：

非常感谢更简单的解决方案 :)
这正是我的建议。

【解决方案2】：

您可以通过将input 标签更改为

<input type="checkbox" [checked]="material.checked" (change)="onSelectMaterialType(material, $event.target.checked)" />

我认为sarr_materialType 是包含生成复选框的所有信息的数组。向您的sarr_materialType 对象添加一个名为checked 的字段，并根据数组2 的内容是否存在于数组1 中为其设置值。您可以为此使用javascript includes。然后会自动检查那些设置为 true 的。

【讨论】：

【解决方案3】：

如果我正确理解了问题，就可以了。如果在selected 数组中找到material（使用indexOf 函数），并且在更改输入时，将选中复选框，将其添加到selected 数组或从中删除。

<div *ngFor="let material of sarr_materialType">
  <input 
    type="checkbox"
    [checked]="selected.indexOf(material)>-1"
    (change)="selected.indexOf(material)>-1 ? selected.splice(selected.indexOf(material),1):selected.push(material)">
    {{material}}
</div>

演示：https://stackblitz.com/edit/angular-k6bm8v

【讨论】：

【解决方案4】：

我使用了两种方法来操作复选框数据。这可能会有所帮助。

    checked(item){
         if(this.selected.indexOf(item) != -1){
          return true;
         }
    }



// when checkbox change, add/remove the item from the array
  onChange(checked, item){
    if(checked){
    this.selected.push(item);
    } else {
      this.selected.splice(this.selected.indexOf(item), 1)
    }
  }

这是我的html

    <div *ngFor="let item of options">
      <input type="checkbox" (change)="onChange($event.target.checked, item)" [checked]="checked(item)">
      {{item}}
    </div>

    <p  *ngFor="let item of selected"> {{item}}</p>

你可以在这里查看我的 stackblitz https://stackblitz.com/edit/angular-dynamic-checkboxes

【讨论】：