Necesito crear una lista de ion-select basada en una matriz dentro de un objeto llamado myObject.array .
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.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).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):
ion-selects dinámicamente a partir de una matriz y no vincularlos entre sí?Editar:
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute ).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); }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; }