Ionic 3/Angular 嵌套数组对象填充下拉选并获取对应accountNo的方法

你原写法的错误是virtualAddrObjFinal是外层数组类型，不是对象，不能直接访问.vpainfo属性，你需要先遍历外层的账户数组，再遍历每个账户下的vpainfo数组。

推荐先预处理数据拍平为一维数组，模板渲染和后续取值逻辑会更简洁：

步骤1：TS层预处理数据 #

// 定义拍平后的vpa选项数组
vpaOptions: {vpa: string, accountNo: string}[] = [];
// 用于展示选中的账号
selectedAccountNo: string = '';

ngOnInit() {
  // 遍历嵌套结构生成一维选项数组
  this.virtualAddrObjFinal.forEach(account => {
    account.vpainfo.forEach(vpaItem => {
      this.vpaOptions.push({
        vpa: vpaItem.vpa,
        accountNo: account.accountNo
      })
    })
  })
}

// 下拉选中事件处理
fetchVPAAccountNumber(event: any) {
  const selectedOption = event.detail.value;
  this.selectedAccountNo = selectedOption.accountNo;
  // 直接将selectedAccountNo绑定到需要展示的视图位置即可
}

步骤2：模板层渲染下拉选项 #

<ion-select [formControl]="vaddr" (ionChange)="fetchVPAAccountNumber($event)" interface="popover">
   <ion-option *ngFor="let option of vpaOptions;let i = index" [value]="option">
    {{option.vpa}}
   </ion-option>
</ion-select> 

<!-- 展示对应accountNo的位置示例 -->
<p>选中的账号：{{selectedAccountNo}}</p>

如果不想修改TS逻辑，也可以直接在模板用ng-container嵌套遍历：

<ion-select [formControl]="vaddr" (ionChange)="fetchVPAAccountNumber($event)" interface="popover">
  <ng-container *ngFor="let account of virtualAddrObjFinal">
    <ion-option *ngFor="let vaddrlist of account.vpainfo;let i = index" [value]="{vpa: vaddrlist.vpa, accountNo: account.accountNo}">
      {{vaddrlist.vpa}}
    </ion-option>
  </ng-container>
</ion-select> 

注意：如果你使用的是Ionic4及以上版本，ion-option组件已重命名为ion-select-option，组件找不到时替换标签名即可。

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