Ionic 3 /Angular 下拉从嵌套数组对象中选择值答案

【问题标题】：Ionic 3 /Angular dropdown select value from nested array objectIonic 3 /Angular 下拉从嵌套数组对象中选择值
【发布时间】：2021-11-21 01:01:33
【问题描述】：

我通过以下方式从包含嵌套对象数组的 API 获得响应。

var virtualAddrObjFinal = [
    {
      "accountNo": "5019000",
      "vpainfo": [
        {
          "vpa": "newq@bandhan"
        },
        {
          "vpa": "log@bandhan"
        }
      ]
    },
    {
      "accountNo": "1018000",
      "vpainfo": [
        {
          "vpa": "newesaf@bandhan"
        }
      ]
    }
  ]

并希望使用vpainfo 对象填充下拉列表中的值。这是嵌套对象的问题。任何人都可以提出实现这一目标的方法。

我试过下面的方法，

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

并且需要在选择具体的vpa后显示accountNo。

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

我创建了一个stackblitz，以便您查看我的解决方案。

HTML - 在您的 html 中，您需要添加 ng-container 来保存第一个 ngFor 以迭代 virtualAddrObjFinal 数组，然后在您的 ion-option 中添加第二个 ngFor迭代 vpainfo 列表。我还为所选帐号添加了一个标签，该标签仅在您仅从 ion-select 中选择某些内容时才会显示。

<ion-item>
  <ion-select style="width: 100%" formControlName="vaddr" (ionChange)="fetchVPAAccountNumber($event)" interface="popover">
    <ng-container *ngFor="let item of virtualAddrObjFinal;let i = index">
      <ion-option *ngFor="let vaddrlist of item.vpainfo;let i = index" [value]="vaddrlist">{{vaddrlist.vpa}}
      </ion-option>
    </ng-container>
  </ion-select>
</ion-item>
<ion-item *ngIf="form.controls['vaddr'].value">
  <ion-label>Account Number: {{accountNumber}}</ion-label>
</ion-item>

TS - 在 ts 文件中，我过滤了 virtualAddrObjFinal 数组，该数组从 ion-select 中检查所选 vpa 的正确 accountNumber。然后，我将它分配给accountNumber 变量。

fetchVPAAccountNumber(ev) {
  const selected = this.virtualAddrObjFinal.filter((e) => {
    return e.vpainfo.some((v) => {
      return v.vpa.indexOf(ev.vpa) > -1;
    });
  });
  this.accountNumber = selected.length > 0 ? selected[0].accountNo : '';
}

【讨论】：

太棒了！它工作正常