Following is the code block for creating multiple rows with select dropdowns:
<ion-content>
<ion-grid>
<ion-row *ngFor =“let al of allist”>
<ion-col>
{{al.MarkedOn}}
</ion-col>
<ion-col>
<ion-select placeholder=“Set Status” id="{{al.ID}}" [(ngModel)]=“status” ok-text=“Ok” cancel-text=“Cancel” (ionFocus)=“alFocused(al.ID)” (ionChange)=“onStatusChange($event,status,al.ID)” >
<ion-option value=“A” selected>A</ion-option>
<ion-option value=“B” >B</ion-option>
<ion-option value=“C” >C</ion-option>
</ion-select>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
stdFocused(alid)
{
console.log(alid);
this.aid=alid;
}
onStatusChange(event: Event,eventstatus,alNumber)
{
if(this.aid!=alNumber) // enters in this block but it is not working
{
var node = document.getElementById(alNumber);
node.setAttribute(“ion-stop-event”,"(ionChange)");
event.stopPropagation(); // but this is also not working
}
if(this.aid==alNumber)
{
console.log(eventstatus+"--"+alNumber);
// here changing the status
}
}
This code will create multiple rows and each row will have its own select dropdown and these selects will have the same onStatusChange function. So, when the status from the first select is changed then all the other select’s status is also changed. So, this is the problem I am facing. It should not set every row’s select status.
I really appreciate it if anybody knows how to fix this. Thanks.
(sorry for any mistake in explaining my problem, new here)