I am looking to dynamically generate a list of ion-select elements based on an array within an object named myObject.array.
- When I attempt to create this list using
mypage.page.tsandmypage.page.html, all myion-select-optionsend up interconnected - changing one select option toYcauses all other selects to also change toY. - In the console log, I notice that the
ionChangeevent is triggered only once - however, the data displayed indicates that only a single item withinmyObject.arrayhas been modified. - The issue lies in the fact that the user interface does not accurately reflect the data stored in
mypage.page.ts.
The image below illustrates the UI after modifying just one ion-select, along with the discrepancies between the console log and the UI:
https://i.sstatic.net/WdBXa.png
How can I dynamically generate independent ion-selects from an array without linking them together?
Edit:
- The errors appearing in the console are related to cookies, displaying the following message:
.Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute - These errors are not caused by my code; regardless of adding or removing the page, they persist.
Below is my code snippet:
<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>
Additionally, here is the corresponding mypage.page.ts code:
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);
}