Как установить значение флажка в true, используя два массива?

Question

У меня есть два массива

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

Мой массив 1 содержит все данные о материале, а массив 2 - это выбранный пользователем материал. Поэтому в следующий раз, когда пользователь откроет форму, я хочу, чтобы Array 1 заполнялся как флажок, и установил Elements of Array 2 в значение true (флажок установлен), который пользователь выбрал

Как этого добиться в JavaScript / Машинопись?

Любая помощь высоко ценится.

Заранее спасибо. Ниже приведен код, который заполняет все флажки. Я хочу, чтобы элементы, присутствующие в массиве 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>

Answer 1

Это можно сделать так:

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

Рабочая демонстрация

Answer 2

я использовал два метода для манипулирования данными флажка. это может быть полезно.

    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>

вы можете проверить мой стек, здесь https://stackblitz.com/edit/angular-dynamic-checkboxes

Answer 3

Если я правильно понял проблему, это подойдет. Флажки будут отмечены, если material был найден в массиве selected (с использованием функции 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

Answer 4

Этого можно добиться, изменив тег input на

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

Я считаю, что sarr_materialType - это массив, содержащий всю информацию, которая генерирует флажки. Добавьте поле к вашему sarr_materialType объекту с именем checked и установите для него значение в зависимости от того, существует ли содержимое массива 2 в массиве 1. Для этого вы можете использовать javascript includes. Те из них, которые установлены в true, будут автоматически проверены.