Tengo un for que va sobre elementos en una matriz de variables booleanas y usa cada booleano como modelo para una casilla de verificación. La matriz de modelos se ve así:

  models = [true,false,true,true,false,false,true];

La plantilla se ve así:

<h1>Hello {{name}}</h1><br>
<div *ngFor="let mod of models; let i=index">
    <input [(ngModel)]="models[i]" type="checkbox">
</div>
<pre>{{models|json}}</pre>

Cuando hago clic en una casilla de verificación, un elemento aleatorio también cambia su estado.

No estoy seguro de si esto es un error o simplemente no entiendo algo.

¿Cómo hago que estas casillas de verificación se comporten adecuadamente?

https://plnkr.co/edit/siTXHoIF3OuXnZd37yir?p=preview <- Ejemplo completo que muestra este comportamiento

¡Gracias por adelantado por cualquier ayuda!

0
Lord Otori 3 may. 2017 a las 20:05

2 respuestas

La mejor respuesta

Consulte mi plunker editado: https://plnkr.co/edit/fXPfLTnotRgX2cm1jGyB?p=TviewRgX2cm1jGyB?p= / a>

Básicamente, debe realizar un seguimiento del objeto en ngFor: Cómo establecer enlaces en ngFor en Angular 2?

En la plantilla:

<h1>Hello {{name}}</h1><br>
<div *ngFor="let mod of models; let i=index,trackBy:trackByIndex">
    <input [(ngModel)]="models[i]" type="checkbox" (click)="onClick(i)">
</div>
<pre>{{models}}</pre>

En component.ts:

  trackByIndex(index: number, obj: any): any {
    return index;
  }
1
Community 23 may. 2017 a las 12:17

Modifiqué su código para usar una matriz de objetos como modelo en lugar de una matriz de booleanos simples. Eso me parece un poco más idiomático y soluciona tu problema.

Con este enfoque también podría agregar cosas como un campo label y otra información al modelo para cada casilla de verificación, y usar eso en su plantilla, por lo que en general creo que esta es una mejor manera de manejar las cosas.

Probablemente haya una mejor manera de abordar esto usando Angular 2, pero realmente no estoy familiarizado con eso, lo siento.

https://plnkr.co/edit/8561HPbx7hDcHsTVq1C4?p=preview

models = [
      {
        selected : true
      },
      {
        selected : false
      },
      {
        selected : true
      },
      {
        selected : true
      },
      {
        selected : false
      },
      {
        selected : false
      },
      {
        selected : true
      },
  ];
0
Karl Reid 3 may. 2017 a las 17:31