在* ngFor- IONIC2/Angular2中迭代两个数组

发布时间：2020-12-17 07:57:52 所属栏目：安全来源：网络整理

导读：我已将值存储在两个数组中,以便在单个离子列表中进行迭代. Billerstatusstate和Billerstatusnamelst是两个阵列. 我尝试了以下迭代 ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst " {{bil}} button round{{stat}}

我已将值存储在两个数组中,以便在单个离子列表中进行迭代. Billerstatusstate和Billerstatusnamelst是两个阵列.

我尝试了以下迭代

<ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

和

<ion-list ion-item *ngFor="let stat of Billerstatusstate" *ngFor="let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

它取两个局部变量的第一个迭代值.

我错过了什么？

有没有其他方法可以将两个值存储在单个数组中,并使用ngFor在View端拆分它.

我可以创建一个管道来将你的两个数组“合并”为一个数组,然后你可以迭代这个新的数组.

这是一个示例：

@Pipe({
  name: 'merge'
})
export class MergePipe {
  transform(arr1,arr2) {
    var arr = [];
    arr1.forEach((elt,i) => {
      arr.push({ state: elt,name: arr2[i] });
    });
  }
}

并以这种方式使用它：

<ion-list ion-item *ngFor="let elt of Billerstatusstate | merge:Billerstatusnamelst"  >
  {{elt.name}} <button round>{{elt.state}}</button>
</ion-list>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!