¿Cómo podemos inicializar y manipular el valor de una casilla de verificación? He visto varios ejemplos, pero no he podido hacer que ninguno funcione.

Estoy tratando de presentar una tabla N x M donde las filas representan tareas y las columnas estudiantes. La idea es que al marcar una de las casillas de verificación en la tabla se asigne una tarea a un estudiante.

Hay un mapa hash mecanografiado que contiene el valor de todos los checkboxes;

assigned : { [key:string]:boolean; } = {};  

La clave hash es:

var key = a.TaskId + '_' + a.StudentId;

La tabla se genera con un ngFor anidado:

<tr *ngFor="let t of tasks">

  <td>Task Name for task... {{t.taskId}}&nbsp; &nbsp;</td>
  <td *ngFor="let s of students">

    <input type="checkbox" name=#{{t.TaskId}}_{{s.StudentId}} change="onAssignmentChange(t,s)" [checked]="cbValue(t, s)">

  </td>
</tr>

El cbValue(t, s) está abajo:

cbValue(taskItem, studentItem) {
   var key =  taskItem.TaskId + '_' +studentItem.StudentId;
   return this.assigned[key];
}

Esto no funciona, todas las casillas de verificación en la tabla aparecen sin marcar, sin importar los valores en el hash.

También he intentado:

    <input type="checkbox"  change="onAssignmentChange(t,s)" [checked]="cbValue(t, s)">

    <input type="checkbox"  change="onAssignmentChange(t,s)" [(ngModel)]={{t.TaskId}}+'_'+{{s.StudentId}} >

    <input type="checkbox"  change="onAssignmentChange(t,s)" [(ngModel)]="assigned[t.TaskId"+'_'+"s.StudentId"]>

Ninguno de los cuales funciona.

Me parece que estoy bastante a oscuras aquí; onAssignmentChange tampoco se activa, no hay errores en la consola.

Además

...  name=#{{t.TaskId}}_{{s.StudentId}}  ...

¿Se supone que esto es un objetivo local o algo así?

Gracias de antemano

0
user2785918 3 dic. 2016 a las 20:07

1 respuesta

La mejor respuesta

Esto es bastante trivial ya que vamos a enlazar directamente con el objeto assigned, ya que estamos usando el descriptor de acceso de propiedad de corchete de JavaScript, también obtenemos una instanciación dinámica gratuita de la propiedad a través de la plantilla (sucio, tal vez, pero poderoso). Además, donde sea que esté procesando esto, asuma que un valor faltante es falso:

plantilla

<tr *ngFor="let t of tasks">

        <td>Task Name for task... {{t.taskName}}&nbsp; &nbsp;</td>
        <td *ngFor="let s of students">

          <input type="checkbox" name="{{t.taskId}}_{{s.studentId}}" [(ngModel)]="assigned[t.taskId + '_' + s.studentId]">
        </td>
      </tr>

Aquí hay un plunker para demostrar: http://plnkr.co/edit/9RorhJnv42cCJanWb80L?p=preview < / a>

0
silentsod 4 dic. 2016 a las 09:51