Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

296
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!