I am facing an issue with a piece of code that creates dynamic drop-down select options. I need to retrieve the selected values from these items.
The loop in the code generates 3 to 5, or sometimes even more, different dropdowns based on API data.
My goal is to identify which values the user selects and then submit them. However, my "shop now" button is currently non-functional. I have tried various methods but haven't been successful. Can someone help me fix this?
Upon clicking the shop button, I want the value/IDs of the selected items to be printed in the console.
Screenshots are provided for reference, your assistance is greatly appreciated.
https://i.sstatic.net/B2Pao.png https://i.sstatic.net/F5ziY.png
<ion-card>
<div *ngFor="let item of currentItem.DealRuleDealCode; let i = index">
<div *ngFor="let CT of item.CategoryType; let j = index ">
<ion-grid>
<ion-row padding-left padding-right>
<ion-col size="6" no-padding>
<ion-label class="catName">{{CT.CategoryName}}: </ion-label>
</ion-col>
<ion-col>
**<ion-select ok-text="Okay" cancel-text="Dismiss" no-padding class="select" (ionChange)="selectChangeHandler($event)">
<ion-item *ngFor="let SC of CT.SubCategory; let k = index">
<ion-select-option [value]="SC.SubCategoryCode" selected>{{SC.SubCategoryName}} </ion-select-option>
</ion-item>
</ion-select>**
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
<ion-grid>
<hr />
<ion-row>
<ion-col size="6" no-padding>
<ion-button fill="solid" color="light" expand="full" size="">
<label class="bold"> {{currentItem.Price | currency : 'PKR'}} </label>
</ion-button>
</ion-col>
<ion-col size="6" no-padding>
<ion-button fill="solid" color="light" (click)="shopNow()" expand="full" size="" class="bold">
<label> Shop </label>
<ion-icon name="add-circle" slot="end">ADD</ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
This is my shopNow() function.
I simply need to capture all the selected values within this shopNow() Function. How do I achieve this?
shopNow(){
}
Here is my TypeScript file
import { Component, OnInit, Pipe, PipeTransform, Input } from '@angular/core';
import {Validators, FormBuilder, FormGroup, FormArray} from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ProductsService } from '../services/products.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-menu-detail',
templateUrl: './menu-detail.page.html',
styleUrls: ['./menu-detail.page.scss'],
})
export class MenuDetailPage implements OnInit {
currentItem:[];
selectedValues:[] = [];
//selectedItems = [];
constructor(private productService: ProductsService, private router: Router, private formBuilder: FormBuilder) {}
ngOnInit() {
this.currentItem = this.productService.currentItem;
if(this.currentItem.length < 1){
this.router.navigate(['main/menu'])
}
}
selectChangeHandler(event){
console.log(event.target.value)
}
shopNow(){
}
}