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

304
Vistas
Ionic4 + Angular: la creación dinámica de selección de iones con *ngFor da como resultado la vinculación de todas las opciones de selección de iones (sin querer)

Necesito crear una lista de ion-select basada en una matriz dentro de un objeto llamado myObject.array .

  • Cuando creo la lista usando mypage.page.ts y mypage.page.html que se enumeran a continuación. Todas mis ion-select-options se vinculan entre sí, por lo que cuando cambio una ion-select a Y , todas las selecciones de iones cambian a Y , etc.
  • Puedo ver en el registro de mi consola que ionChange se activa solo una vez; dentro de él, también puedo ver los datos correctos (que solo se cambia un elemento dentro de myObject.array).
  • El problema es que la interfaz de usuario no se corresponde con los datos dentro de mypage.page.ts

La imagen a continuación muestra la interfaz de usuario después de cambiar solo una ion-select y el registro de la consola (puede ver que varias ion-select cambiaron y los datos de registro de la consola no se corresponden con la interfaz de usuario):

ingrese la descripción de la imagen aquí

¿Cómo puedo crear ion-selects dinámicamente a partir de una matriz y no vincularlos entre sí?

Editar:

  • Los errores en la consola están relacionados con las cookies (con este mensaje de error: Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute ).
  • Los errores no están relacionados con mi código porque si agrego la página o la elimino, todavía están allí.

Mi código:

 <ion-header> <ion-toolbar> <ion-title>mypage</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-item *ngFor="let output of myObject.array;let i=index;"> <ion-label> Array object {{i}}</ion-label> <ion-select [(ngModel)]="myObject.array[i]" (ionChange)="change($event, i)" okText="Set" cancelText="Throw away"> <ion-select-option value="Y"> Yes? </ion-select-option> <ion-select-option value="N"> No? </ion-select-option> </ion-select> </ion-item> </ion-content>

Y este código mypage.page.ts :

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-mypage', templateUrl: './mypage.page.html', styleUrls: ['./mypage.page.scss'], }) export class MypagePage implements OnInit { myObject = {array: ['Y','Y','Y']}; constructor() { } ngOnInit() { } change(event, i){ console.log(event); console.log(i); console.log(this.myObject); }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

trackBy es algo hecho para mejorar el rendimiento de detección de cambios.

Solo para que conste, así es como uno lo convierte en el índice "trackBy":

Cambio de plantilla

 <ion-item *ngFor="let output of myObject.array; let i=index; trackBy:indexTracker;">

Cambio de controlador

 indexTracker(index: number, value: any) { return index; }
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