Angular 7/Ionic 4动态下拉选择器选中值获取问题求助

你的核心问题是没有为每个动态生成的ion-select建立对应的选中状态跟踪机制，单个selectChangeHandler只能拿到当前变化的单个值，没法汇总所有选择器的结果。下面给你一套完整的实现方案：

步骤1：更新TypeScript组件逻辑 #

我们改用对象结构存储选中值（用分类的唯一标识作为key），这样能精准对应每个选择器的选中状态，同时初始化默认选中值，最后实现shopNow函数汇总结果：

import { Component, OnInit } from '@angular/core'; 
import {Validators, FormBuilder, FormGroup } 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: any; // 建议替换成你的数据接口类型，比[]更严谨
  selectedValues: { [categoryKey: string]: string } = {}; // 用分类唯一标识映射选中值

  constructor(
    private productService: ProductsService, 
    private router: Router, 
    private formBuilder: FormBuilder
  ) { } 

  ngOnInit() { 
    this.currentItem = this.productService.currentItem; 
    if(!this.currentItem || Object.keys(this.currentItem).length < 1){ 
      this.router.navigate(['main/menu']);
    }

    // 初始化默认选中值（匹配你模板里的selected属性）
    this.currentItem.DealRuleDealCode.forEach(dealItem => {
      dealItem.CategoryType.forEach(ct => {
        // 找到默认选中的子分类，优先取标记了selected的，否则取第一个
        const defaultSelected = ct.SubCategory.find(sc => sc.selected) || ct.SubCategory[0];
        if(defaultSelected){
          this.selectedValues[ct.CategoryCode] = defaultSelected.SubCategoryCode;
        }
      });
    });
  } 

  // 可选：如果需要对单个选择变化做额外处理，保留这个方法
  selectChangeHandler(event: any, categoryCode: string){ 
    this.selectedValues[categoryCode] = event.detail.value;
    console.log(`分类 ${categoryCode} 选中值:`, event.detail.value);
  } 

  shopNow(){ 
    // 获取所有选中的子分类值数组
    const allSelectedValues = Object.values(this.selectedValues);
    console.log('所有选中的子分类值:', allSelectedValues);
    
    // 如需查看分类与值的对应关系，打印整个映射对象
    console.log('分类-选中值映射:', this.selectedValues);
  } 
}

步骤2：修改HTML模板绑定逻辑 #

给每个ion-select绑定双向数据模型，关联到我们的selectedValues对象，确保选中状态自动同步：

<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"
              [(ngModel)]="selectedValues[CT.CategoryCode]" <!-- 双向绑定选中值 -->
              (ionChange)="selectChangeHandler($event, CT.CategoryCode)" <!-- 可选：传递分类标识做额外处理 -->
            > 
              <ion-select-option 
                *ngFor="let SC of CT.SubCategory; let k = index" 
                [value]="SC.SubCategoryCode"
                [selected]="SC.selected" <!-- 用属性绑定替代硬编码selected -->
              >
                {{SC.SubCategoryName}} 
              </ion-select-option> 
            </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>

关键改动说明 #

1. 选中值存储优化：用对象代替数组，通过分类唯一标识（比如CategoryCode）作为key，彻底避免动态生成选择器时的索引混乱问题。
2. 双向绑定简化逻辑：[(ngModel)]会自动同步选择器的选中状态到selectedValues，比单独依赖ionChange更可靠。
3. 默认值初始化：页面加载时就预填充默认选中值，确保shopNow不会拿到空数据。
4. 结果汇总：通过Object.values()快速提取所有选中值，或者直接打印映射对象查看分类与值的对应关系。

现在点击"Shop"按钮，就能在控制台看到所有选择器的选中值了！

内容的提问来源于stack exchange，提问作者Saleem Jafar