Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

127
Vistas
casillas de verificación angulares con matriz bidimensional

tengo una plantilla:

 <mat-card *ngFor="let cargo of cargos" class="cont-mat"> /*...*/ <form [formGroup]="cargoSignupForm" (submit)="onSignupForCargo(cargo.id)" *ngIf="!isLoading"> <p>Odaberite kamione s kojima želite izvršiti prijevoz - Težina robe: {{cargo.weight}} kg</p> <div *ngFor="let truck of (trucksByCargoId.get(cargo.id))"> <input type="checkbox" (change)="onChange(truck._id, $event.target.checked, cargo.id)">{{truck.regNumber}} </div> <input type="submit" value="GO" class="button-basic"> </form>

y 2 funciones componentes:

 truckFormArray = [[]]; ngOnInit() { /*...*/ this.cargoSignupForm = new FormGroup({ trucksId: this.fb.array([]) }); /*...*/ } onChange(truckId: string, isChecked: boolean, cargoId: string) { this.truckFormArray[cargoId] = <FormArray>this.cargoSignupForm.controls.trucksId; if (isChecked) { this.truckFormArray[cargoId].push(new FormControl(truckId)); } else { let index = this.truckFormArray[cargoId].controls.findIndex(x => x.value == truckId) this.truckFormArray[cargoId].removeAt(index); } } onSignupForCargo(cargoId: string) { console.log(this.truckFormArray[cargoId]); }

Solo quiero console_log(this.truckFormArray[cargoId]) . Debe haber un truckFormArray diferente para cada cargoId . Con esa solución, también obtengo trucksFormArray de las casillas de verificación anteriores de cargoId . Espero entiendas lo que quiero decir. En alguna parte es un pequeño error, pero también si crees que hay una mejor solución para hacerlo, eres bienvenido. Gracias por adelantado

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

truckFormArray debe ser un objeto

Es seguro asumir que cargoId no es un número que aumenta secuencialmente a partir de 0, por lo tanto, no tiene sentido declararlo como una matriz, sino declararlo como un objeto:

 truckFormArray = {};

Motivo : las matrices en Javascript siempre están indexadas por números que comienzan desde 0 y aumentan secuencialmente hasta el último índice.

truckFormArray no es un miembro de datos de la instancia de su objeto

Dado que no se inicializa como this.truckFormArray , no tiene this delante. Así que cambie todas las apariciones de this.truckFormArray a truckFormArray .

Motivo : siempre deberá ser coherente cuando se refiera a sus recursos.

Inicializando truckFormArray

Tú tienes

 this.truckFormArray[cargoId] = <FormArray>this.cargoSignupForm.controls.trucksId;

y parece ser incorrecto. Su trucksId parece ser un número e intenta asignarlo a un recurso que se trata como una matriz, por lo que hay una discrepancia de tipo. Si desea almacenar cada ID de trucksId en una matriz identificada por la carga que está presente en los camiones, debe presionar, pero solo si la casilla de verificación está marcada. Entonces, en lugar de lo anterior, necesitarás algo como esto:

 if (!truckFormArray[cargoId]) { //Here I created a JS array for the sake of simplicity, but you can //create a FormArray instance instead if that's more helpful for you this.truckFormArray[cargoId] = []; }

Motivo : si la matriz a la que debe hacer referencia aún no existe, debe crearla.

Resumen

Necesitaras

  • arreglar la inicialización de truckFormArray
  • asegúrese de referirlo de manera coherente con la forma en que se define
  • inicialice cada una de sus matrices de carga cuando sea necesario
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda