Búsqueda de sitios web

Cómo recorrer dos arreglos y compararlos si la misma casilla de verificación está marcada en Angular 2


Tengo un arreglo que contiene toda la lista de oficinas. Otro arreglo es la lista seleccionada por el usuario. Así que ahora quiero mostrar toda la lista de oficinas y si el valor en la lista seleccionada es el mismo que en la lista de oficinas, entonces la casilla de verificación estará marcada. Así es como lo hice.
Código

<div *ngFor="let item of officeLIST">
  <div *ngFor="let officeDATA of allOffice.office">
    <div *ngIf="item.office_id == officeDATA.office_id">
      <input #officeArray type="checkbox" id="officeArray" name="officeArray" class="form-control" value="{{item.officename}}"
        checked> {{(item.officename == "" ? "--No data--" : item.officename)}}
    </div>
    <div *ngIf="item.office_id != officeDATA.office_id">
      <input #officeArray type="checkbox" id="officeArray" name="officeArray" class="form-control" value="{{item.officename}}">      {{(item.officename == "" ? "--No data--" : item.officename)}}
    </div>
  </div>
</div>

y el resultado es

Mi officeLIST

this.officeLIST = [
  { "office_id": "1", "officename": "Sun Dept" },
  { "office_id": "2", "officename": "Moon" },
  { "office_id": "3", "officename": "Stars" }
]

array de allOffice.office

"office": [
    {
      "office_id": "1",
      "officename": "Sun Dept"
    },
    {
      "office_id": "2",
      "officename": "Moon Dept"
    }
  ]

Respuesta #1

usa esta solución. Esto funciona bien para mí. He hecho todas las cosas en el constructor. Si quieres esto en un método, simplemente usa el bloque de código dentro del constructor.

este es mi archivo ts:

  officeLIST: Array<any> = [
    { "office_id": "1", "officename": "Sun Dept" },
    { "office_id": "2", "officename": "Moon" },
    { "office_id": "3", "officename": "Stars" }
  ];


  office: Array<any> = [
    {
      "office_id": "1",
      "officename": "Sun Dept"
    },
    {
      "office_id": "2",
      "officename": "Moon Dept"
    }
  ];
  newArray: Array<any> = [];
  constructor() {
    for (var i = 0; i < this.officeLIST.length; i++) {

      var ismatch = false; // we haven't found it yet

      for (var j = 0; j < this.office.length; j++) {

        if (this.officeLIST[i].office_id == this.office[j].office_id) {
          // we have found this.officeLIST[i]] in this.office, so we can stop searching
          ismatch = true;
          this.officeLIST[i].checked = true;//  checkbox status true
          this.newArray.push(this.officeLIST[i]);
          break;
        }//End if
        // if we never find this.officeLIST[i].office_id in this.office, the for loop will simply end,
        // and ismatch will remain false
      }
      // add this.officeLIST[i] to newArray only if we didn't find a match.
      if (!ismatch) {
        this.officeLIST[i].checked = false;//  checkbox status false
        this.newArray.push(this.officeLIST[i]);
      } //End if
    }
    console.log(this.newArray);

  }

esto es mi html:

<div *ngFor="let item of newArray">
  <input type="checkbox" [checked]="item.checked"> {{item.officename}}
</div>

Respuesta #2

La matriz seleccionada por el usuario tendrá los IDs de las casillas marcadas. Supongamos que había seleccionado Sun Dept y Moon, entonces

this.userSelectedArray = ["1","2"];

<div *ngFor="let item of officeLIST">
      <input type="checkbox" [attr.checked]="userSelectedArray.indexOf(item.office_id) !== -1 ? true : false">
    </div>

Artículos relacionados