Ionic 3 /Angular 下拉列表 select 来自嵌套数组对象的值

Question

我从一个 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。

Answer 1

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

HTML - 在您的 html 中，您需要添加 ng-container 来容纳第一个 ngFor 以迭代 virtualAddrObjFinal 数组然后在你的离子选项中添加第二个 ngFor 来迭代 vpainfo 列表。我还为 selected 帐号添加了一个标签，该标签仅在您仅 selected 来自 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 数组，该数组检查来自 [=16] 的 selected vpa 的正确帐号=].然后，我将它分配给 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 : '';
}

Ionic 3 /Angular 下拉列表 select 来自嵌套数组对象的值

Ionic 3 /Angular dropdown select value from nested array object

ionic-framework

ionic3

angular