CheckBox Angular 4 ngfor problem when selecting

My idea to solve the problems:

Create a structure in the component with the fields of the checkboxes:

//asumo que sensor es el array ["var_TempExt", "var_HumRExt", "var_HumRInt", ... ]
checkboxes= {};
sensor.forEach(nombre => checkboxes[nombre]=false);

With which you would have an object with attributes called like every checkbox initialized to false.

And then you do something like:

<div class="col-md-6 col-lg-6 col-6" *ngFor="let data of sensor; let i= index">
    <input class="form-check-input" type="checkbox" name= "miDataInterior" 
        [(ngModel)]="checkboxes[data.name]" id="{{'inlineCheckbox' + i}}">

    <label class="form-check-label" for="{{'inlineCheckbox' + i}}">{{data.name}}</label>
</div>

  

TL; DR: You're linking miDataInterior to all checkboxes

To solve it there are an infinite number of possible solutions. What you have to understand is that when you do [(ngModel)]="miDataInterior" in each checkbox, you are linking that variable to all of them. If miDataInterior changes, they will all change.

A simple solution is not to use the link, but the DOM events. When a user changes the value of the checkbox, add or remove that element to an array that will be the result. This is achieved with the event (change) and check if the target.checked of the event is active:

<input class="form-check-input" type="checkbox" 
  name= "miDataInterior" (change)="$event.target.checked ? agregar(data) : quitar(data)">

And in the component:

  agregar(data: string) { // Agregamos el elemento
    this.miDataInterior.push(data);
  }

  quitar(data) { // Filtramos el elemento para que quede fuera
    this.miDataInterior = this.miDataInterior.filter(s => s !== data);
  }

This way you can use arrays of strings or any type of data. You can find the solution working in this Stackblitz . There you can see that it also works with arrays of objects.

You can surely find other solutions, but you must understand that each checkbox has to have its variable separately.